一、选择图片

使用小程序的<uploader>组件选择多张图片,在bindchange事件获取图片文件列表:

Page({
  uploadChange(e) {
    this.setData({
      images: e.detail.file
    })
  } 
})

<!-- wxml -->
<uploader bindchange="uploadChange">
  <view class="uploader-content">
    选择图片
  </view>
</uploader>

二、上传函数

设计上传函数,使用wx.uploadFile API上传单张图片:

uploadImg(filePath) {
  return new Promise((resolve, reject) => {
    wx.uploadFile({
      url: '/upload_api',
      filePath,
      name: 'file',
      success(res) {
        resolve(res)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

三、Promise.all并发上传

使用Promise.all并发上传多张图片:

let promises = images.map(img => {
  return uploadImg(img.url) 
})

Promise.all(promises).then(res => {
  // 成功
}).catch(err => {
  // 失败
})

四、错误处理

处理上传失败情况,如果某张图片上传失败,跳过继续上传其他图片:

uploadImg(filePath).catch(err => {
  console.log('图片上传失败')
})

五、优化

可以对并发数做限制,避免上传过多图片耗尽资源。

通过Promise.allSettled获取每个图片上传结果。

增强上传接口的健壮性等。

以上就是使用Promise.all实现小程序高效多图上传的方法,可以大幅提升上传体验。