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

下面是针对“微信小程序多张图片上传功能”的完整攻略：

一、准备工作

首先，我们需要明确微信小程序中 “上传文件” 功能的 API：wx.uploadFile，该 API 可以上传本地文件或微信选择图片接口获得的图片文件。然后，我们还需通过微信开发者工具创建一个小程序项目，并且确保在小程序后台配置中开启 “图片安全审核” 和 “访问域名” 等选项。

二、实现多张图片上传

1. 前端实现

我们需要创建一个 <button> 元素，当用户点击该按钮时，触发选择本地图片的功能，并将选中的图片文件存储在一个数组中，随后，通过 for 循环遍历数组，调用 wx.uploadFile 方法将每一个图片文件上传到后端服务器。

示例代码如下：

<button bindtap="chooseImage">选择图片</button>
<image wx:for="{{imageList}}" wx:key="{{index}}" src="{{item}}"></image>

chooseImage: function() {
  let that = this;
  wx.chooseImage({
    count: 9,
    success(res) {
      that.setData({
        imageList: res.tempFilePaths
      })
    }
  })
  that.uploadImage();
},

uploadImage: function() {
  let that = this;
  let imageList = that.data.imageList;
  for (let i = 0; i < imageList.length; i++) {
    wx.uploadFile({
      url: 'https://example.com/api/upload',
      filePath: imageList[i],
      name: 'image',
      formData: {
        'user': 'test'
      },
      success(res) {
        console.log('上传成功');
      },
      fail(res) {
        console.log('上传失败');
      }
    })
  }
}

2. 后端实现

在后端服务器中，我们需要创建一个上传文件的 API 接口，接收前端传来的图片文件，并将其保存入服务器中。

示例代码如下：

# Python Flask 示例代码
@app.route('/api/upload', methods=['POST'])
def upload():
    file = request.files['image']
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        file.save(os.path.join(upload_folder, filename))
        return "Success"
    else:
        return "Failure"