当前位置: 首页 > news >正文

微信小程序 图片的上传

错误示范

/*从相册中选择文件  微信小程序*/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);}});},


http://www.mrgr.cn/news/39737.html

相关文章:

  • InnerClassLambdaMetafactory 内部类Lambda元工厂 源码解析
  • [Cocoa]_[初级]_[绘制文本如何设置断行方式]
  • 内核级理解套接字和全连接队列
  • 物联网智能设备:未来生活的变革者
  • centos发送邮件教程:从配置到发送全攻略!
  • 头戴式耳机性价比排名怎样?头戴式耳机性价比之王推荐!
  • 新考纲下的PMP考试有多难?
  • 谁在「力挺」激光雷达
  • 理解 Vue 的 setup 应用程序钩子
  • CDN与高防服务:区别与应用场景
  • YOLO11 | 一年更三版 版版不一样 | 关键改进及网络结构图【全网首发】
  • 深入掌握 Protobuf 与 RPC 的高效结合:实现C++工程中的高效通信
  • 原生 React Native 和 Expo对比
  • 记录一次出现循环依赖问题
  • 【Verilog学习日常】—牛客网刷题—Verilog企业真题—VL69
  • 电商数据洞察新纪元:深度解析API接口集成实战
  • 双十一实用的数码好物分享!学生党必看,性价比超高!
  • 【无人机设计与技术】四旋翼无人机的建模
  • AI异常检测方案实施-基于基准块的无监督学习
  • TIM“PWM”输出比较原理解析