小程序使用Promise.all按顺序上传多图

Promise.all获得的成功结果会返回一个数组，而数组里面的数据顺序和Promise.all接收到的数组顺序是一致的。发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。比如小程序需要上传九张图片，且上传顺序和显示顺序为一致。代码如下：

在main.js文件中可封装为(记得要抛出封装的方法uploadImg )：

const uploadImg = (tempFilePaths,url) => {
  wx.showLoading({
    title: "上传中"
  });
  return new Promise((presolve, preject) => {
    let uploads = []
    tempFilePaths.map((item, i) => {
      uploads[i] = new Promise((resolve, reject) => {
        wx.uploadFile({
          url: "xxxxxx", // 仅为示例，非真实的接口地址
          filePath: item,
          name: "file",
          formData: {
            userid: wx.getStorageSync("userid") //需要传给接口的参数以formData传过去
          },
          success(res) {//成功返回
       //    console.log(res)
            resolve(JSON.parse(res.data))
          },
          fail(err) {//失败返回
            console.log(err)
            wx.hideLoading()
          }
        })
      })
    })
    Promise.all(uploads).then(res => {
        //图片上传完成
        presolve(res)
        wx.hideLoading()
    }).catch(err => {
        preject(err)
        wx.hideLoading()
        wx.showToast({
          title: '上传失败请重试',
          icon: 'none'
        })
    })
  })
}

在需要上传图片的js文件中引入main.js：
在wxml中标签image展示图片最好是 wx.chooseImage返回的临时地址（也可以先上传到服务器，再把返回的图片地址展示图片，但是这样上传到服务器返回地址需要很长的时间间隔，用户体验不是很好。）