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

问题

小程序上传图片要多张上传,而微信小程序提供的接口 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);
}
});

资源