微信小程序 图片的上传

错误示范

javascript 复制代码
/*从相册中选择文件  微信小程序*/
	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.tempFiles0.tempFilePath表示的也只是图片的临时路径,发送图片应该将图片文件转换成 FormData 对象。
javascript 复制代码
/*从相册中选择文件  微信小程序*/
	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 方法会自动处理文件的上传。

javascript 复制代码
	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);
		    }
		  });
		
	}
相关推荐
前端小木屋14 小时前
uniapp与蓝牙设备连接详细步骤
前端·微信小程序
万岳科技系统开发17 小时前
私域直播系统开发从0到1:企业直播平台搭建全过程
前端·小程序·架构
2501_9160074717 小时前
iOS应用性能优化全面指南:从内存管理到工具使用
android·ios·性能优化·小程序·uni-app·iphone·webview
i220818 Faiz Ul18 小时前
理财系统|基于java+vue的家庭理财系统小程序(源码+数据库+文档)
java·vue.js·spring boot·小程序·论文·毕设·理财系统
河北清兮网络科技19 小时前
企业软件开发全流程:从需求到上线,如何高效落地?
小程序·app·短剧·短剧app·广告联盟
维双云1 天前
想做企业公司的教育知识付费小程序多少钱?
小程序
huang_jimei1 天前
【无标题】
微信小程序
柚鸥ASO优化1 天前
微信正在变成“搜索引擎”:小程序SEO机会全面爆发
搜索引擎·微信·小程序·小程序优化
Brave & Real1 天前
小程序 const 在js中以及与同类的var和let之间的差异
javascript·微信小程序·小程序
Joolun商城源码_Java2 天前
JooLun Pro旗舰版SaaS多租户商城:商城小程序与店铺小程序的功能区别详解
小程序