场景:uniapp开发的小程序需要批量上传多张图片
uniapp 使用uni.uploadFile 上传多张图片
代码块:
//多文件上传
batchUpLoadFile(url, files, success, fail, progress) {
var that = this;
const uploadTask = uni.uploadFile({
url: url,
files,//多文件上传使用files
header: {
"content-type": "multipart/form-data",
},
name: "file",
success(ret) {
let json = JSON.parse(ret.data);
if (json.code == 0) {
success(json.data);
} else if (json.code == 100031 || json.code == 100043) {
uni.hideToast();
} else {
fail(json.message);
}
},
fail(err) {
fail(err);
}
});
uploadTask.onProgressUpdate(res => {
if (progress) {
progress(res.progress);
}
});
},
问题: 报错 TypeError: Cannot read property ‘onProgressUpdate’ of undefined
图一
console.log(uploadTask) //undefined
uploadTask.onProgressUpdate(res => {
if (progress) {
progress(res.progress);
}
});
//onProgressUpdate报错
//打印代码中的uploadTask,显示为undefined
再对比uniapp文档发现,文档中有明确提示
uniapp文档中明确`微信小程序不支持多文件上传`
微信小程序只支持单文件上传,传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API
解决:通过递归的方式调用实现多张上传
代码块:
//封装上传文件代码
batchUpLoadFile(url, filePath, success, fail, progress) {
var that = this;
const uploadTask = uni.uploadFile({
url: url,
filePath,//多文件上传使用files
header: {
"content-type": "multipart/form-data",
},
name: "file",
success(ret) {
let json = JSON.parse(ret.data);
if (json.code == 0) {
success(json.data);
} else if (json.code == 100031 || json.code == 100043) {
uni.hideToast();
} else {
fail(json.message);
}
},
fail(err) {
fail(err);
}
});
uploadTask.onProgressUpdate(res => {
if (progress) {
progress(res.progress);
}
});
},
//页面中调用
uploadimage(type) {
uni.showToast({
title: "图片上传中...",
icon: "loading",
mask: true,
duration: 10000
});
this.requireimgslist.length <= 0 || (this.requireimgslist.length = 0);
//this.params.imgslist.slice();//拿到当前所有需要上传的图片
this.upload(this.params.imgslist.slice(),type);
},
upload(imgslist,type) {
main.batchUpLoadFile(url.uploadbytes, imgslist[0], success => {
imgslist.splice(0, 1);
this.requireimgslist.push(success)
if (imgslist.length > 0) {
this.upload(imgslist);//如果还有图片,继续上传
} else {
this.requestUrl(type)//上传完毕执行下一步操作
}
}, fail => {
main.showToast(fail);
});
},
留下痕迹,并同时提醒自己看文档要仔细奥
祝小伙伴们不踩坑嘻嘻~😊