要实现多个文件同时使用uni.uploadFile上传并最后汇总上传结果,可以采用以下步骤:
选择文件:首先使用uni.chooseMedia或uni.chooseImage等API选择需要上传的文件。
创建上传任务:对于选择的每个文件,创建一个uni.uploadFile的上传任务,并将其封装成一个Promise对象。
并行上传:使用Promise.all来并行执行所有的上传任务,这样可以同时上传多个文件。
处理结果:在Promise.all的.then方法中处理所有文件上传成功后的结果,这里可以汇总所有上传文件的结果。
错误处理:在Promise.all的.catch方法中处理上传过程中可能出现的错误。
下面是一个具体的代码示例:
// 选择文件
uni.chooseMedia({
mediaType: ['image'], // 选择图片
sourceType: ['album'], // 从相册选择
success: (res) => {
const { tempFiles } = res;
// 上传文件
uploadFiles(tempFiles);
},
fail: () => {
console.log('选择文件失败');
},
});
// 上传文件
const uploadFiles = (files) => {
const uploadTasks = files.map((file) => {
return new Promise((resolve, reject) => {
const uploadTask = uni.uploadFile({
url: 'https://www.xxx.cn/v1/wxInvoice/upload', // 接口地址
filePath: file.tempFilePath, // 临时文件路径
name: 'files[]', // 服务器接收的文件字段名
header: {
Authorization: 'Bearer ' + token.value,
'Content-Type': 'multipart/form-data',
},
formData: {
// 可以在这里添加额外的formData参数
},
success: (res) => {
if (res.statusCode === 200) {
resolve(res.data); // 解析响应数据
} else {
reject(new Error('上传失败'));
}
},
fail: (err) => {
reject(err);
},
});
// 监听上传进度
uploadTask.onProgressUpdate((res) => {
console.log('上传进度', res.progress);
console.log('已经上传的数据长度', res.totalBytesSent);
console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
});
});
});
// 并行上传所有文件,并处理结果
Promise.all(uploadTasks)
.then((results) => {
console.log('所有文件上传成功', results);
// 这里可以对results进行处理,比如汇总上传结果
})
.catch((err) => {
console.log('文件上传失败', err);
// 处理上传失败情况
});
}; 这段代码首先选择文件,然后为每个文件创建一个上传任务,并使用Promise.all来并行上传所有文件。在上传成功后,可以在.then方法中汇总所有上传结果,在.catch方法中处理错误。这样就能实现多个文件的并行上传,并在最后汇总上传结果。
网友回复


