微信小程序 wx.uploadFile无法上传解决办法

微信小程序 wx.uploadFile无法上传解决办法

问题背景

在开发微信小程序过程中，有时我们需要上传图片等文件到服务器。为此，可以使用微信小程序API中的wx.uploadFile方法来实现文件上传。但在使用wx.uploadFile方法上传时，可能会遇到无法上传的情况。

解决办法

造成无法上传的原因主要有两个：请求header未设置并且文件大小超过1MB。解决这两个问题的方法如下：

1. 设置请求header

如果不设置请求header，服务器就无法获取文件上传时的Content-Type，因此就无法识别该文件的类型，导致上传失败。解决方法是，在请求中设置header的content-type属性。示例如下：

wx.uploadFile({
   url: 'https://yourserver.com/upload', // 上传文件到服务器的接口地址
   filePath: tempFilePath, // 需要上传的文件路径
   name: 'file', // 服务器对应的文件条目的名称
   header: {
      "Content-Type": "multipart/form-data" // 设置请求header的content-type属性
   },
   success: function(res){
      // 上传成功后的处理逻辑
   },
   fail:function(res){
      // 上传失败后的处理逻辑
   }
})

2. 文件大小限制

微信小程序规定，单个文件大小最大为1MB。如果文件大小超过1MB，也会导致文件无法上传。解决方法是，在客户端通过压缩或裁切等方式减小文件大小，或在服务器端通过配置加大文件大小限制。示例如下：

wx.chooseImage({
  count: 1, // 可选择的图片数量
  sizeType: ['original', 'compressed'], // 可选择的图片尺寸（原图、压缩）
  sourceType: ['album', 'camera'], // 可选择的图片来源（相册、相机）
  success: function (res) {
    const tempFilePaths = res.tempFilePaths
    const tempImagePath = tempFilePaths[0]
    wx.getImageInfo({
      src: tempImagePath,
      success: function (res) {
        const imageWidth = res.width // 获取图片宽度
        const imageHeight = res.height // 获取图片高度
        if (res.size > 1024 * 1024) { // 如果文件大小超过1MB
          wx.compressImage({
            src: tempImagePath, // 原始图片路径
            quality: 50, // 压缩质量（50表示压缩50%）
            success: function (res) {
              const compressedImagePath = res.tempFilePath // 压缩后的图片路径
              wx.uploadFile({
                url: 'https://yourserver.com/upload', // 上传文件到服务器的接口地址
                filePath: compressedImagePath, // 压缩后的图片路径
                name: 'file', // 服务器对应的文件条目的名称
                header: {
                  "Content-Type": "multipart/form-data" // 设置请求header的content-type属性
                },
                success: function (res) {
                  // 上传成功后的处理逻辑
                },
                fail: function (res) {
                  // 上传失败后的处理逻辑
                }
              })
            }
          })
        } else {
          wx.uploadFile({
            url: 'https://yourserver.com/upload', // 上传文件到服务器的接口地址
            filePath: tempImagePath, // 原始图片路径
            name: 'file', // 服务器对应的文件条目的名称
            header: {
              "Content-Type": "multipart/form-data" // 设置请求header的content-type属性
            },
            success: function (res) {
              // 上传成功后的处理逻辑
            },
            fail: function (res) {
              // 上传失败后的处理逻辑
            }
          })
        }
      }
    })
  }
})

总结

通过设置请求header和文件大小限制，我们能够解决微信小程序中wx.uploadFile方法无法上传的问题。在开发中，我们可以根据具体情况来选择合适的解决方式。