54 lines
1.4 KiB
JavaScript
54 lines
1.4 KiB
JavaScript
Component({
|
||
data: {
|
||
fileList: [],
|
||
},
|
||
methods: {
|
||
handleAdd(e) {
|
||
const { fileList } = this.data;
|
||
const { files } = e.detail;
|
||
|
||
// 方法1：选择完所有图片之后，统一上传，因此选择完就直接展示
|
||
this.setData({
|
||
fileList: [...fileList, ...files], // 此时设置了 fileList 之后才会展示选择的图片
|
||
});
|
||
|
||
// 方法2：每次选择图片都上传，展示每次上传图片的进度
|
||
// files.forEach(file => this.uploadFile(file))
|
||
},
|
||
onUpload(file) {
|
||
const { fileList } = this.data;
|
||
|
||
this.setData({
|
||
fileList: [...fileList, { ...file, status: 'loading' }],
|
||
});
|
||
const { length } = fileList;
|
||
|
||
const task = wx.uploadFile({
|
||
url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
|
||
filePath: file.url,
|
||
name: 'file',
|
||
formData: { user: 'test' },
|
||
success: () => {
|
||
this.setData({
|
||
[`fileList[${length}].status`]: 'done',
|
||
});
|
||
},
|
||
});
|
||
task.onProgressUpdate((res) => {
|
||
this.setData({
|
||
[`fileList[${length}].percent`]: res.progress,
|
||
});
|
||
});
|
||
},
|
||
handleRemove(e) {
|
||
const { index } = e.detail;
|
||
const { fileList } = this.data;
|
||
|
||
fileList.splice(index, 1);
|
||
this.setData({
|
||
fileList,
|
||
});
|
||
},
|
||
},
|
||
});
|