微信小程序 图片的上传

错误示范

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

}

原文地址：https://blog.csdn.net/weixin_72254790/article/details/142655414

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！