本篇文章以小程序中的代表【微信小程序】为例,分享一下在微信小程序中实现多图上传的源码实现。
PS:其它小程序 和 uni-app 也可通用该思路实现。
代码片段(可导入微信WEB开发者工具体验):https://developers.weixin.qq.com/s/DHrt69mk7af3
本篇文章后面会对这两种方式的优缺点分析说明,让大家更好的选择使用合适的实现方式。
JS源码:
const app = getApp()
Page({
data: {
// 已选择上传的本地图片地址
urlArr:['helang.jpg','1846492969.jpg','web.jpg']
},
onLoad: function () {
},
// 多图上传-回调式
uploadCallback(){
let index = 0; // 当前位置,标识已上传到第几张图片
let newUrls = []; // 上传成功后的图片地址数组
// 图片上传方法
let upload = ()=>{
let nowUrl = this.data.urlArr[index]; //当前待上传的图片地址
wx.showLoading({
title: '正在上传',
});
/*
无图片上传接口,收setTimeout 模拟延迟状态
项目中替换为 wx.uploadFile 即可
*/
// 假设每 1000ms 上传一张图片
setTimeout(()=>{
// 此处为已上传成功后的回调函数内容
let resUrl = `服务器返回上传后的地址 ${nowUrl}`; //假设这是上传成功后返回的地址
newUrls.push(resUrl); // 将上传后的地址添加到成功数组中
// 判断图片是否已经全部上传完成
if (index >= (this.data.urlArr.length-1)){
send();
}else{
//未全部上传完时标识位置+1并再次调用上传方法
index++;
upload();
}
},1000);
}
// 发送方法,用作图片上传完后,得到图片地址提交给其它接口或其它操作
let send = () => {
// 关闭加载提示
wx.hideLoading();
wx.showToast({
title: '上传成功',
icon:'success'
})
// 输出已经上传完的图片地址,请查看控制台结果
console.log(newUrls);
}
// 调用上传方法
upload();
},
// 多图上传-Promise
uploadPromise(){
/* Promise 对象数组 */
let p_arr = [];
/* 新建 Promise 方法,nowUrl参数为当前上传的图片地址 */
let new_p = (nowUrl) => {
return new Promise((resolve, reject) => {
/*
无图片上传接口,收setTimeout 模拟延迟状态
项目中替换为 wx.uploadFile 即可
*/
// 假设每 1000ms 上传一张图片
setTimeout(()=>{
// 此处为已上传成功后的回调函数内容
let resUrl = `服务器返回上传后的地址 ${nowUrl}`; //假设这是上传成功后返回的地址
resolve(resUrl);
},1000);
})
}
// 遍历数据,创建相应的 Promise 数组数据
this.data.urlArr.forEach((item, index) => {
let nowUrl = this.data.urlArr[index]; //当前待上传的图片地址
p_arr.push(new_p(nowUrl));
});
wx.showLoading({
title: '正在上传',
});
/* 所有图片上传完成后调用该方法 */
Promise.all(p_arr).then((res) => {
// 关闭加载提示
wx.hideLoading();
wx.showToast({
title: '上传成功',
icon: 'success'
})
// 输出已经上传完的图片地址,请查看控制台结果
console.log(res);
});
}
})
方法优缺点说明:
uploadCallback 方法
优点:
- 多图以队列形式按序提交,能很好的把握图片上传情况(比如:1.有个需求是要提示已经上传多少张,总共多少张。2.若因用户权限问题无法提交,在上传第一张图片时则已经知道)
- 相对减少服务器压力
缺点:全部上传完成所需时长相对较长
uploadPromise 方法
优点:全部上传完成所需时长相对较短
缺点:
- 多个请求同时发出,若服务器处理能力不足,会造成服务器并发问题导致崩溃。若是第三方服务器有可能被视为恶意请求而拦截;
- 对于有上传进度这种需求的情况下点难以处理。还有在上传错误时造成多次无效请求。(假设有100张图片,上传第一张时已经提示登录的帐号有问题,但还是会发出剩下的99次请求,接口返回的结果都是一样的失败);
相信有一部分读者是通过 循环 上传来完成的,循环 的方式 与 uploadPromise 方法 的方式又有什么区别呢?
- 循环的方式 判断是否已经全部上传完成的便利性上不如 uploadPromise 方法 的方式
- 循环的方式 产生的结果 与 未上传前的数据排序不统一。(实际中图片的大小不一致,后上传的图片可能会比先上传的完成的更快)。
结合以上两点区别,小编放弃使用 循环 的方式实现 多图上传的功能。
愿本篇文章对大家有所帮助!
作者:黄河爱浪 QQ:1846492969,邮箱:helang.love@qq.com
微信公众号:
web-7258
,本文原创,著作权归作者所有,转载请注明原链接及出处。更多精彩文章,请扫下方二维码关注我的公众号