递归调用多个时,在时间上有时候可能比较费时间,我们可以采取promise的异步执行并发进行优化,具体代码如下:
uploadImage(localId) { return new Promise((resolve, reject) => { wx.uploadImage({ localId: localId, isShowProgressTips: 0, success: function (res) { resolve(res.serverId) }, fail: function (error) { reject(error) } }) }) }, wxuploadImage(localIds) { let _this = this let promises = [] for (let i = 0; i < localIds.length; i++) { let loacId = localIds[i].id let linkStatu = _this.isIosOrAndroid() if (!(linkStatu == 'android')) { if (loacId.indexOf('wxlocalresource') != -1) { loacId = loacId.replace('wxlocalresource', 'wxLocalResource') } } promises.push(_this.uploadImage(loacId)) } Promise.all(promises) .then(serverIds => { //serverIds 就是所有执行完成的返回结果 }) .catch(error => { }) },
当然,我上面只是个案例,同时也说一个坑就是上面我处理的是调用微信jssdk的上传api,但是多图上传时进行并发并不起作用,原因是微信那边的上传只能等上传完上一张图片才能执行下一张图片,所以如果是调用微信的 wx.uploadImage就要采取递归的方式才行,或者使用 async/await,举例代码如下:
async wxuploadImage(localIds) { var serverIds = [] // this.localIdsdata = localIds for (let i = 0; i < localIds.length; i++) { try { // alert("2"+ localIds[i].id) let loacId = localIds[i].id let linkStatu = this.isIosOrAndroid() //判断安卓还是ios if (!(linkStatu == 'android')) { if (loacId.indexOf('wxlocalresource') != -1) { loacId = loacId.replace('wxlocalresource', 'wxLocalResource') } } var serverId = await this.uploadImage(loacId) // 等待Promise对象返回 serverIds.push(serverId) // 将serverId存储到数组中 } catch (err) { console.error(err) // 处理错误信息 } } // 所有图片上传完成,进行下一步处理 console.log(serverIds) this.sendMediaid(serverIds) }, uploadImage(loacId) { return new Promise(function (resolve, reject) { wx.uploadImage({ localId: loacId, isShowProgressTips: 0, // 显示上传进度提示 success: function (res) { var serverId = res.serverId // 上传成功后返回的serverId // alert("3" + serverId) resolve(serverId) // 将serverId传递给Promise的then方法 }, fail: function (err) { reject(err) // 将错误信息传递给Promise的catch方法 } }) }) },