微信小程序 图片的上传

错误示范

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);
		    }
		  });
		
	}
相关推荐
黑马程序员毕设16 小时前
基于Java的医院药品管理系统的优化设计与实现
java·开发语言·spring boot·小程序·架构·课程设计·毕设
数字游民952721 小时前
史诗级更新:微信小程序支持个人主体接入虚拟支付
ai·微信小程序·小程序·opc·数字游民9527
smartpi_ai21 小时前
语音模块与主控 MCU 串口对接实战:协议设计六要点,联调少走一半弯路
人工智能·小程序·语音识别
禾高网络21 小时前
养老系统开发:背景、架构与养老行业展望
java·大数据·人工智能·小程序·架构
lhldsg1 天前
相册印刷实战指南:从设计规范到系统落地全流程解析
java·小程序·架构·设计规范
汤姆yu1 天前
基于微信小程序的晚托机构管理系统
微信小程序·小程序·晚托
博、、1 天前
酒馆预约系统开发实战:从需求分析到上线部署指南
小程序·需求分析
zww89491111 天前
相册印刷项目实战指南:从设计到成品的完整技术流程
java·小程序·eclipse
2501_915918411 天前
Flutter项目配置iOS混淆的详细步骤与工具推荐
android·flutter·ios·小程序·uni-app·cocoa·iphone
这是程序猿1 天前
高校宿舍信息管理系统小程序
java·小程序·毕业设计