微信小程序图片上传问题及解决方案

一、微信小程序图片上传不了

当用户使用微信小程序上传图片时，可能会遇到图片无法上传的情况。这种情况一般有以下几种可能：

网络问题：在网络状况较差的情况下，图片上传可能会超时失败或者上传的速度过慢。
图片格式问题：微信小程序只支持上传 jpg、png、gif 格式的图片，如果上传非这三种格式的图片将会失败。
大小限制：微信小程序对图片的大小有限制，单张图片不能超过 2M。

二、微信小程序上传图片功能

微信小程序提供的上传图片的 API 是 wx.chooseImage，具体方法如下：

wx.chooseImage({
  count: 1, // 最多可以选择的图片张数
  sizeType: ['original', 'compressed'], // 所选的图片的尺寸
  sourceType: ['album', 'camera'], // 图片的来源，默认为相册
  success: function (res) {
    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
    var tempFilePaths = res.tempFilePaths
  }
})

用户在点击上传图片按钮后，会弹出系统的选择图片界面，用户选择完图片后可以获取到 tempFilePaths，然后可以通过 wx.uploadFile 将图片上传到服务器端。

三、微信小程序图片上传并展示

当图片上传成功后，我们需要展示上传后的图片，可以通过以下方式实现：

wx.uploadFile({
  url: 'url', // 服务器地址
  filePath: tempFilePaths[0], // 要上传文件资源的路径
  name: 'file', // 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
  success: function (res) {
    var data = JSON.parse(res.data)
    var imageUrl = data.imageUrl
    // 在前端将 imageUrl 动态绑定到 img 标签的 src 属性上
  }
})

我们需要将服务器的图片路径保存下来，然后将 imageUrl 动态绑定到 img 标签的 src 属性上即可实现图片上传并展示。

四、微信小程序图片上传大小限制

当用户上传的图片大小超过微信小程序的大小限制时，上传操作将会失败。在上传图片前我们可以通过以下代码进行图片大小的限制：

wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function (res) {
    wx.getFileInfo({
      filePath: res.tempFilePaths[0],
      success: function (info) {
        var size = info.size;
        if (size > 2 * 1024 * 1024 ) { // 判断图片大小是否超过 2M
          wx.showToast({
            title: '图片不能超过 2M',
            icon: 'none',
            duration: 2000
          })
          return;
        }
        // 图片上传代码
      }
    })
  }
})

五、微信小程序图片上传压缩

当用户选择的图片过大时，可以通过对图片进行压缩来减小图片的大小，从而加快图片上传的速度。在微信小程序中可以借助第三方库 wximagecompressor.js 来实现图片的压缩，操作步骤如下：

首先在小程序根目录下新建一个名为 utils 的文件夹，然后在该文件夹下创建 wximagecompressor.js 文件，将第三方库 wximagecompressor.js 的代码粘贴到该文件中。
在需要压缩图片的页面引入 wximagecompressor.js 库：

var wxImageCompressor = require('../../utils/wximagecompressor.js')

在页面中调用 wxImageCompressor 接口对图片进行压缩：

wx.chooseImage({
  success: function (res) {
    wxImageCompressor.compress(res.tempFilePaths[0], 80, function(result){
        // 图片上传代码
    });
  }
})

其中，compress 方法的第一个参数是需要压缩的图片路径，第二个参数是压缩质量，取值范围为 0 ~ 100。

六、微信小程序图片上传失败

当图片上传失败时，应该对失败原因进行诊断，可能的原因如下：

网络问题：在网络状况较差或者上传图片的文件较大的情况下，可能会导致上传失败。
服务器问题：服务器可能存在故障，或者服务器接口存在问题。
文件格式问题：确保上传的文件符合文件上传格式的要求，例如类型和大小限制等。当遇到这些问题，我们应该及时抛出提示信息，并通过排查问题所在，尽快解决。

七、微信小程序图片上传不了怎么回事

当图片上传出现问题时，可以通过以下方式进行问题排查：

查看控制台的日志输出信息，检查上传过程中是否存在问题。
检查上传的图片路径是否正确。
检查接口返回的数据是否符合预期。
检查网络连接是否存在问题。
检查服务器端的代码是否存在问题。

八、微信小程序图片上传优化

为了提高用户体验，可以通过以下方式进行微信小程序图片上传的优化：

对于图片上传时间较长的情况，可以使用 loading 动画提示用户当前任务正在处理中。
在用户选择图片之后，可以对图片进行压缩，减小图片体积，提高图片上传速度。
可以在图片上传完成之后对上传的结果进行校验，显示上传结果或者重新上传。
对于用户上传的过大的图片，可以在前端进行保存压缩后再上传。
在网络状况较差的情况下，可以采取断点续传等策略，提高上传成功率。

微信小程序图片上传全面解析