微信小程序 图片的上传

错误示范

/*从相册中选择文件  微信小程序*/
	chooseImage(){
		wx.chooseMedia({
		  count: 9,
		  mediaType: ['image'],
		  sourceType: ['album'],
		  success(res) {
			  wx.request({
				  url:"发送的端口占位符",
				  data:res.tempFiles[0].tempFilePath,
				  method:'POST',
					  
				  success(res){//请求成功后应该返回的是分割完成的图片(Arraybuffer 类型)
					  res.data
				  },fail(err){
					  console.error('图片发送请求错误:'err.errMsg+',错误码:'+err.error,)
				  }
			  })

		  }
		})
	},

两个致命错误(是菜鸟勿笑):

  • 首先wx.request的data是用来发送文本数据的,最多可以发送Arraybuffer的音频数据,这里应该使用 wx.uploadFile来上传图片到后端。
  • 其次res.tempFiles[0].tempFilePath表示的也只是图片的临时路径,发送图片应该将图片文件转换成 FormData 对象。
/*从相册中选择文件  微信小程序*/
	chooseImage(){
		  wx.chooseMedia({
		    count: 1, // 选择图片的数量,只需要选择一张图片
		    mediaType: ['image'],
		    sourceType: ['album'],
		    success(res) {
		      // 只关心第一张图片
		      const tempFilePath = res.tempFiles[0].tempFilePath;
		      const formData = new FormData();
		      formData.append('file', {
		        name: 'image.jpg', // 指定文件名
		        uri: tempFilePath,
		        type: 'image/jpeg', // 文件类型
		      });
		
		      wx.uploadFile({
		        url: "发送的端口占位符", 
		        filePath: tempFilePath,
		        name: 'file', // 与后端约定的文件对应的 key, 
		        formData: formData, // 如果有额外的表单数据,可以在这里添加
		        success(uploadRes) {
		          console.log('图片上传成功', uploadRes);
		          // 这里可以处理上传成功后的逻辑,比如解析服务器返回的数据
		        },
		        fail(err) {
		          console.error('图片上传请求错误:', err.errMsg);
		        }
		      });
		    },
		    fail(err) {
		      console.error('选择图片失败:', err.errMsg);
		    }
		  });
		
	},

打脸了,

在微信小程序中,FormData 不是一个内置的全局对象,所以你会看到 ReferenceError: FormData is not defined 这样的错误。在小程序中,你不需要创建 FormData 对象,因为 wx.uploadFile 方法会自动处理文件的上传。

	chooseImage(){
		  wx.chooseMedia({
		    count: 1, // 选择图片的数量,只需要选择一张图片
		    mediaType: ['image'],
		    sourceType: ['album'],
		    success(res) {
		      // 只关心第一张图片
		      const tempFilePath = res.tempFiles[0].tempFilePath;
		      wx.uploadFile({
		        url: "http://127.0.0.1:5000/upimage", 
		        filePath: tempFilePath,
		        name: 'file', // 与后端约定的文件对应的 key, 
		        success(uploadRes) {
		          console.log('图片上传成功', uploadRes);
		          // 这里可以处理上传成功后的逻辑,比如解析服务器返回的数据
		        },
		        fail(err) {
		          console.error('图片上传请求错误:', err.errMsg);
		        }
		      });
		    },
		    fail(err) {
		      console.error('选择图片失败:', err.errMsg);
		    }
		  });
		
	}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/885769.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

机器学习-朴素贝叶斯

分类是机器学习最常见的任务。 定义:给定一个对象 X,将其划分到预定义好的某一个类别 yi中 –输入 X –输出Y (取值于有限集 {y1,y 2,…yn }) 应用: –人群,新闻分类,Query分类,商品分类&a…

一次实践:给自己的手机摄像头进行相机标定

文章目录 1. 问题引入2. 准备工作2.1 标定场2.2 相机拍摄 3. 基本原理3.1 成像原理3.2 畸变校正 4. 标定解算4.1 代码实现4.2 详细解析4.2.1 解算实现4.2.2 提取点位 4.3 解算结果 5. 问题补充 1. 问题引入 不得不说,现在的计算机视觉技术已经发展到足够成熟的阶段…

用于视觉的MetaFormer基线模型

摘要 https://arxiv.org/pdf/2210.13452 摘要——MetaFormer,即Transformer的抽象架构,已被发现在实现竞争性能中发挥着重要作用。在本文中,我们再次通过将研究重点从令牌混合器(token mixer)设计转移开,来…

leetcode每日一题day19(24.9.29)——买票需要的时间

思路:对于位置k在队伍最末尾时,位置k前的人对于某一个人需要等的时间为 ​​​​​​​min(tickets[k],tickets[i]) 对于当前的人前方的的人可以使用上述策略,但对于后方由于当前的人有更高的优先,而导致情况有所不…

51单片机应用开发---keil 创建一个新工程并用Protues 8仿真(以点亮LED为例)

实现目标 1、掌握keil V5软件 创建一个新工程; 2、具体目标:1.会新建一个工程;2.编程实现点亮开发板的LED1. 一、新建工程步骤 1.1 在桌面上新建一个名字为 LED的文件夹 1.2 双击打开Keil uVision5 软件,点击 Project —>…

目标检测技术的发展:从R-CNN、YOLO到DETR、DINO

“深度人工智能”是成都深度智谷科技旗下的人工智能教育机构订阅号,主要分享人工智能的基础知识、技术发展、学习经验等。此外,订阅号还为大家提供了人工智能的培训学习服务和人工智能证书的报考服务,欢迎大家前来咨询,实现自己的…

修改Kali Linux的镜像网站

由于官方的镜像可能会出现连接不上的问题导致无法安装我们所需要的包,所以需要切换镜像站为国内的,以下是一些国内常用的Kali Linux镜像网站,它们提供了与Kali Linux官方网站相同的软件包和资源,但访问速度更快: #官方…

【CKA】二、节点管理-设置节点不可用

2、节点管理-设置节点不可用 1. 考题内容: 2. 答题思路: 先设置节点不可用,然后驱逐节点上的pod 这道题就两条命令,直接背熟就行。 也可以查看帮助 kubectl cordon -h kubectl drain -h 参数详情: –delete-empty…

User-Agent在WebMagic爬虫中的重要性

对于需要从网站上抓取数据的开发者来说,WebMagic是一个强大的工具。它是一个简单灵活的Java爬虫框架,用于抓取网页数据。在爬虫技术中,User-Agent(用户代理)是一个关键的HTTP请求头,它告诉服务器关于客户端…

LeetCode 面试经典150题 50.Pow(x,n)

题目&#xff1a;实现 pow(x, n) &#xff0c;即计算 x 的整数 n 次幂函数&#xff08;即&#xff0c; &#xff09;。 思路&#xff1a; 代码&#xff1a; class Solution {public double myPow(double x, int n) {double ans 1;long N n;if (N < 0) {N -N;x 1 / x;}…

YOLOv11改进策略【损失函数篇】| Shape-IoU:考虑边界框形状和尺度的更精确度量

一、本文介绍 本文记录的是改进YOLOv11的损失函数&#xff0c;将其替换成Shape-IoU。现有边界框回归方法通常考虑真实GT&#xff08;Ground Truth&#xff09;框与预测框之间的几何关系&#xff0c;通过边界框的相对位置和形状计算损失&#xff0c;但忽略了边界框本身的形状和…

机器学习模型评估

前言 承接上篇讲述了机器学习有哪些常见的模型算法&#xff0c;以及适用的场景&#xff0c;本篇将继续讲述如何评估模型。模型评估的目的是选出泛化能力强的模型。泛化能力强表示模型能很好地适用于未知的样本&#xff0c;模型的错误率低、精度高。本文将从评估方法和评估指标…

汽车3d动画渲染选择哪个?选择最佳云渲染解决方案

面临汽车3D动画渲染挑战&#xff1f;选择正确的云渲染服务至关重要。探索最佳解决方案&#xff0c;优化渲染效率&#xff0c;快速呈现逼真动画。 汽车3d动画渲染选择哪个&#xff1f; 对于汽车3D动画渲染&#xff0c;选择哪个渲染器取决于你的项目需求、预算和期望的效果。Ble…

计算机毕业设计 基于协同过滤算法的个性化音乐推荐系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

<<机器学习实战>>10-11节笔记:生成器与线性回归手动实现

10生成器与python实现 如果是曲线规律的数据集&#xff0c;则需要把模型变复杂。如果是噪音较大&#xff0c;则需要做特征工程。 随机种子的知识点补充&#xff1a; 根据不同库中的随机过程&#xff0c;需要用对应的随机种子&#xff1a; 比如 llist(range(5)) random.shuf…

Ubuntu下安装向日葵:闪退

下载 https://sunlogin.oray.com/download 初次安装 $ sudo dpkg -i SunloginClient_15.2.0.63064_amd64.deb 正在选中未选择的软件包 sunloginclient。 (正在读取数据库 ... 系统当前共安装有 234281 个文件和目录。) 准备解压 SunloginClient_15.2.0.63064_amd64.deb ..…

助农小程序|助农扶贫系统|基于java的助农扶贫系统小程序设计与实现(源码+数据库+文档)

助农扶贫系统小程序 目录 基于java的助农扶贫系统小程序设计与实现 一、前言 二、系统功能设计 三、系统实现 5.1.1 农户管理 5.1.2 用户管理 5.1.3 订单统计 5.2.1 商品信息管理 5.3.1 商品信息 5.3.2 订单信息 5.3.3 商品评价 5.3.4 商品退货 四、数据库设计 1、…

帝都程序猿十二时辰

前言 2019年度国产剧《长安十二时辰》火了&#xff0c;其口碑榜首、节奏紧凑、贴合原著、电影质感&#xff0c;都是这部剧的亮点。而最令人震撼的还是剧中对大唐盛世的还原&#xff0c;长安街坊的市容市貌、长安百姓的生活日常、长安风情的美轮美奂……而关于十二时辰的话题也接…

ubuntu18.04 Anconda安装及使用

1、安装Anaconda 1)下载&#xff1a; 下载链接&#xff1a;https://www.anaconda.com/download#downloads 点击图中Free Download&#xff0c;登录并下在 下载对应版本 2&#xff09;安装 sudo bash Anaconda3-2024.06-1-Linux-x86_64.sh输入后&#xff0c;直接回车安装。 出…

大数据-156 Apache Druid 案例实战 Scala Kafka 订单统计

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…