微信小程序Promise.all批量上传文件实现代码

发表于 分类于 / / Changyan：

问题

小程序上传图片要多张上传，而微信小程序提供的接口 wx.uploadFile 一次只能上传一个。

解决

利用 Promise.all 解决。

代码

环境：使用到了 小程序官方的 weui UI 框架

wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<mp-cells>
  <mp-cell>
    <mp-uploader
      bindfail="uploadError"
      bindsuccess="uploadSuccess"
      select="{{selectFile}}"
      binddelete="deleteFile"
      upload="{{uplaodFile}}"
      files="{{files}}"
      max-size="{{ 5 * 1024 * 1024 }}"
      max-count="2"
      title="上传驾驶证"
      tips="最多选择两张"
    ></mp-uploader>
  </mp-cell>
</mp-cells>

js

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
Page({
  data: {
    localFiles: [] // 驾驶证上传files文件
  },
  onLoad() {
    // 图片上传相关初始化
    this.setData({
      selectFile: this.selectFile.bind(this),
      uplaodFile: this.uplaodFile.bind(this)
    });
  },
  // 选择图片触发
  selectFile(files) {
    console.log('files', files);
    // 返回false可以阻止某次文件上传
    // 组件已设置 max-size 为 5M，此处不用处理
  },
  // 上传图片
  uplaodFile(files) {
    const that = this;
    console.log('upload files', files);
    const filePaths = files.tempFilePaths;
    // 文件上传的函数，返回一个promise

    // 多文件上传，Promise.all
    return Promise.all(
      filePaths.map((tempFilePath, index) => {
        return new Promise((resolve, reject) => {
          wx.uploadFile({
            url: mdaUrl + '/commonImg/uploadPic',
            filePath: tempFilePath,
            header: {
              'content-type': 'multipart/form-data',
              PROJECTCODE: 'TMS'
            },
            name: 'file',
            success(res) {
              const result = JSON.parse(res.data);
              if (result.code === 0) {
                console.log(result);
                that.setData({
                  driverImages: [...that.data.driverImages, result.data]
                });
                resolve(result.data);
              } else {
                reject(res);
              }
            },
            fail() {
              reject(new Error('上传出错'));
            }
          });
        });
      })
    )
      .then(results => {
        console.log(results);
        // Promise的callback里面必须resolve({urls})表示成功，否则表示失败
        return { urls: results.map(data => data.url) };
      })
      .catch(err => {
        wx.showToast({
          title: '上传失败，请重新上传！'
        });
        return Promise.reject(err);
      });
  },
  // 删除图片
  deleteFile(e) {
    const { index, item } = e.detail;
    console.log(index, item);
    const target = this.data.driverImages.find(
      imgObj => imgObj.url === item.url
    );
    console.log(this.data.driverImages);
    wx.request({
      url: mdaUrl + '/commonImg/deleteListFilePath',
      method: 'POST',
      data: [
        {
          filePath: target.filePath
        }
      ],
      success(res) {
        const result = res.data;
        if (result.code === 0) {
          wx.showToast({
            title: '删除成功'
          });
        } else {
          wx.showToast({
            title: '删除失败'
          });
        }
      }
    });
  },
  uploadError(e) {
    console.log('upload error', e.detail);
  },
  uploadSuccess(e) {
    console.log('upload success', e.detail);
  }
});

资源