微信小程序如何实现批量上传图片？

wx.uploadFile只能一次上传一张, 有什么办法可以实现批量上传吗？

目前官方尚未提供批量上传的api，所以只能自己想办法曲线救国

业务需求

日常我们经常会遇到这样的业务场景，提交表单时，将多张图片和文本数据一起上传到服务器。在web端我们可以利用FormData组装数据来实现。但小程序端是没有浏览器对象的。

曲线救国

开头我们提到了，小程序端没有批量上传的api，结合上面的业务场景，我们分两步走来实现这个需求。

1. 循环上传图片

submitPic(){
    /**
      this.data.tempFilePaths 用户选择的图片
      URL.uploadImg 服务器接口路径
      docMainId 文件主表ID 首次上传文件时返回 后续其他文件上传时需携带此参数 提交表单时 业务主表通过此参数与多个文件建立关联
      index 文件列表索引值
    */
    if(!this.data.tempFilePaths || this.data.tempFilePaths.length == 0){
      wx.showToast({
        title: '请先上传图片',
        icon:'none',
      })
      return
    }
    wx.showLoading({
      title: '上传中',
      mask: true
    })
    var docMainId = null
    var index = 0;
    //
    (function uploadImage(self){
      if(index < self.data.tempFilePaths.length){
        var url = `${URL.uploadImg}`
        if(docMainId){
          url += `?docMainId=${docMainId}`
        }
        wx.uploadFile({
          url: url,
          filePath: self.data.tempFilePaths[index],
          name: 'uploadImg',
          success:res=> {
            docMainId = res.mainId
            index++
            uploadImage(self)
          }
        })
      }else{
        self.setData({docMainId})
        self.subHandler()
      }

    })(this);
    

  },

2. 提交表单数据

/**
    URL.subHandler 服务器接口路径
  */
  subHandler(){
    wx.request({
      url: URL.subHandler,
      data:{
        docMainId:this.data.docMainId,
        ...
      },
      success:res=>{
        wx.hideLoading()
        ...
      },
      fail:res=>{
        wx.hideLoading()
        ...
      }
    })
  },