开发思路：

串行上传：在前端逐个上传图片，并等待上一个图片上传成功后再上传下一个图片，以保持上传顺序。

刚开始开发是通过一个for循环依次上传，没有考虑到可能因为图片大小、网络等原因导致后端返回的url顺序不一致，可以理解成多并发上传的时候而导致的顺序问题

代码大致实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
uploadAllPics(selectedImages, index) {
//fileListPicStorage 和fileList 都是用于展示组件的时候用的，主要就是存储上传之后的图片url
  const { fileListPicStorage = [] } = this.data
  const { fileList = [] } = this.data
  return new Promise((resolve, reject) => {
    if (index >= selectedImages.length) {
      // 所有图片上传完成
      resolve()
      return
    }
    console.log(selectedImages)
    const image = selectedImages[index]
    console.log(image)
    wx.uploadFile({
      url: app.globalData.url + app.globalData.apiVersion + '/upload', // 替换成后端上传接口的URL
      filePath: image.url, // 图片文件的本地路径
      name: 'file', // 后端接收图片的字段名
      header: {
        'Content-Type': 'multipart/form-data',
        token: wx.getStorageSync('token'),
      },
      success: res => {
        // 图片上传成功后的处理
        console.log('图片上传成功', res)
        let data = JSON.parse(res.data)
        fileList.push(data.data.result)
        fileListPicStorage.push({
          url:
            '******' +//****代表图片url的前半部分，因为后端返回的都是后半部分url，需要前端自己补上前半部分的url
            data.data.result,
        })
        this.setData({ fileList, fileListPicStorage })
        // 继续上传下一张图片
        this.uploadAllPics(selectedImages, index + 1)
          .then(resolve)
          .catch(reject)
      },
      fail: error => {
        // 处理上传失败情况
        console.error('图片上传失败', error)

        // 继续上传下一张图片
        this.uploadAllPics(selectedImages, index + 1)
          .then(resolve)
          .catch(reject)
      },
    })
  })
},
//选择照片就上传9张照片
async afterRead(event) {
  app.showLoading('图片上传中')
  const that = this
  //获取照片本地位置的文件数组
  //console.log(event)
  const { file } = event.detail
  console.log(file)
  try {
    //选择完并点击确认之后开始上传图片
    await this.uploadAllPics(file, 0)
    console.log('所有图片上传完成')
    wx.hideLoading()
  } catch (error) {
    console.error('图片上传失败', error)
  }
},