微信小程序多张图片上传功能的实现

1. 概述

微信小程序的图片上传功能是非常常见的功能，通常用于用户上传个人头像或者某些需要多张图片的上传场景。本文将介绍如何实现微信小程序多张图片上传功能。

2. 实现方式

微信小程序中的图片上传功能是通过调用微信提供的API实现的，具体步骤如下：

2.1 选择图片

我们需要先在小程序页面中提供一个按钮，让用户点击后可以选择需要上传的图片。选择图片的方式有两种：从相册选择或者拍照。具体实现可以参考以下代码：

wx.chooseImage({
  count: 9, // 最多可以选择的图片张数，这里设置为9张
  sizeType: ['compressed'], // 可以指定原图或压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
    // 返回选定照片的本地文件路径列表，tempFilePaths可以作为img标签的src属性显示图片
    var tempFilePaths = res.tempFilePaths;
  }
})

2.2 上传图片

选择完需要上传的图片后，我们需要将图片上传到服务器上。上传图片的具体实现需要我们自己编写相关的代码，下面是一个示例：

wx.uploadFile({
  url: '', // 上传图片的接口地址
  filePath: '', // 本地图片路径
  name: 'file', // 服务器接收图片时，对应的字段名
  formData: {
    // 上传图片时需要传递的参数，比如用户名、密码等
  },
  success: function (res) {
    var data = res.data;
  }
})

需要注意的是，在实际开发中，我们需要将url、filePath、formData等参数设置为动态参数，以方便复用。

2.3 进度条显示

在上传大文件或者多张图片时，上传进度较慢，这时我们可以通过进度条显示上传进度，让用户知晓上传进度。具体实现可以参考以下代码：

wx.uploadFile({
  url: '',
  filePath: '',
  name: 'file',
  formData: {
    // 上传图片时需要传递的参数，比如用户名、密码等
  },
  success: function (res) {
    var data = res.data;
  },
  fail: function (error) {
    console.log(error);
  },
  complete: function (res) {
    console.log(res);
  },
  progress: function (res) {
    console.log('上传进度', res.progress);
    console.log('已上传的数据长度', res.totalBytesSent);
    console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
  }
})

2.4 多张图片上传

当需要上传多张图片时，我们需要进行循环上传，直到所有图片上传成功为止。具体实现可以参考以下代码：

wx.chooseImage({
  count: 9,
  sizeType: ['compressed'],
  success: function (res) {
    var tempFilePaths = res.tempFilePaths;
    var uploadImgCount = 0;
    for (var i = 0; i < tempFilePaths.length; i++) {
      wx.uploadFile({
        url: '',
        filePath: tempFilePaths[i],
        name: 'file',
        formData: {
          // 上传图片时需要传递的参数，比如用户名、密码等
        },
        success: function (res) {
          var data = res.data;
        },
        fail: function (error) {
          console.log(error);
        },
        complete: function (res) {
          console.log(res);
          uploadImgCount++;
          if (uploadImgCount === tempFilePaths.length) {
            console.log('所有图片上传完毕！')
          }
        },
        progress: function (res) {
          console.log('上传进度', res.progress);
          console.log('已上传的数据长度', res.totalBytesSent);
          console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
        }
      })
    }
  }
})

3. 总结

本文介绍了如何实现微信小程序多张图片上传功能。通过选择图片、上传图片、进度条显示和循环上传等步骤，我们可以方便地实现图片上传功能。同时需要注意在实际开发中添加相关的参数验证和逻辑处理，以提高程序的鲁棒性和安全性。