微信小程序-处理多个文件上传

一、方法的封装

/**
  * 采用递归的方式上传多个文件
  * filePaths 要上传的资源
  * results 上传成功返回的数据
  * successUp 成功个数
  * failUp 失败个数
  * index 上传文件的下标
  */
function uploadOneByOne(filePaths = [], results = [] , successUp = 0, failUp = 0, index = 0) {
  return new Promise((resolve, reject) => {

    if (filePaths.length == 0) {
      resolve(results)
    }

    wx.showLoading({
      title: `正在上传第${index + 1}个`,
    })
    wx.uploadFile({
      url: "https://xxxx.xxx.com/auth/file/upload",//服务器地址
      filePath: filePaths[index],
      name: "file",//对应字段名
      header: { "content-type": "application/json; multipart/form-data;" },
      success: res => {
        successUp++;
        if (res.data) {
          results = results.concat(JSON.parse(res.data));
        }
      },
      fail: res => {
        failUp++;
      },
      complete: res => {
        index++;
        if (index >= filePaths.length) {
          wx.hideLoading();
          console.log('上传成功' + successUp + ',' + '失败' + failUp);
          resolve(results);
        } else {
          uploadOneByOne(filePaths, results, successUp, failUp, index).then(res => {
            resolve(res);
          });
        }
      }
    })
  })
}

二、使用

// 上传图片
if (this.data.chooseImg.length > 0) {
    var that = this;
    that.uploadOneByOne(that.data.chooseImg).then(res => {
        var urls = res.map(item => {
            return `/resource/${item.group}/${item.path}`
        })
        console.log(urls);
    })
}