因为微信上传图片只支持一张一张上传,所以首次处理多张上传图片功能时选择了Promise.all的方法
//首先,微信获取相机凭证
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: appId, // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名
jsApiList: [
"uploadImage",
"chooseImage",
], // 必填,需要使用的JS接口列表
});
//微信选择图片的接口
function upFlie(){
wx.chooseImage({
count: 3, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
//res.localIds[0] ,存储在全局变量flieList中
flieList.push(res.localIds[0])
}
});
使用Promise.all上传所有图片(在安卓上可以正常使用,在苹果中上传会终止)
Promise.all(flieList.map(path=>{
return new Promise((resolve,reject)=>{
wx.uploadImage({
localId:path,//图片的本地路径
success(res){
//res.serverId图片在服务器上的id
resolve(res.serverId)
},
fail(err){
reject(err)
}
})
})
}).then(serverIds=>{
// 所有图片上传成功,serverIds是所有图片的服务器ID数组
//使用serverIds处理自己的接口逻辑
}).catch(err=>{
// 上传过程中有任何一个失败,会进入这里
// console.error(error);
})
注意:
由于微信使用的是自己处理过的浏览器内核,而wx浏览器在苹果和安卓中的限制是不同的,也就是兼容问题
这一块出现上述问题的原因就是在苹果中Promise.all()方法失效le
更新之后的代码我没采用递归去处理多张图片的上传
syncUpload(localIds) {
var localId = localIds.pop();
wx.uploadImage({
localId: localId.toString(), // 需要上传的图片的本地ID,由chooseImage接口获得
success: function (res) {
//res.serverId 返回图片的服务器端ID
that.imgServerIds = [...that.imgServerIds,res.serverId]
if (localIds.length > 0) {
window.setTimeout(function () {
that.syncUpload(localIds);
}, 100);
} else {
window.setTimeout(function () {
// downloadImage(0);
that.ReportUP(that.imgServerIds)
}, 100);
}
}
})
},
总结:在处理兼容问题时,尽量少用复杂的js的api,尽量自己手撕,多使用原生js以及一些算法思想
参考:微信jssdk上传多张图片问题