微信公众号上传图片安卓和苹果兼容问题记录

因为微信上传图片只支持一张一张上传,所以首次处理多张上传图片功能时选择了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上传多张图片问题