按照顺序上传图片获取fileID(原方案数据混乱、递归上传方案)
发布于 4 年前 作者 junsu 2985 次浏览 来自 分享

原方案是for遍历(没有改良) 异步导致获取的fileID混乱

  • 云存储里图片是按照顺序上传的,原本以为团队做了递归优化,后来发现不对,再看了看时间确认了异步处理。

  • temp为待上传图片数组
//for遍历原方案:虽然有promise,但是没有抛出数据直接在循环提内setData导致数据混乱
for (let i = 0, len = temp.length; i < len; i++) {
        httpData.push(
          new Promise((reslove, reject) => {
          //cloudPath为文件名
            let cloudPath =
              "postImage/" +
              new Date().getTime() +
              temp[i].match(/\.[^.]+?$/)[0]; 
           //上传存储
            wx.cloud.uploadFile({
              cloudPath,
              filePath: temp[i],
              success: (res) => {
                this.setData({
                  fileIDs: this.data.fileIDs.concat(res.fileID),
                });
                console.log(res.fileID);
                reslove();
              },
              fail: (res) => {
                console.log(res);
              },
            });
          })
        );
      }
      //promise后面将得到的数据一起上传数据库
      promise.all(httpData).then(){
      //下一步
      }

递归上传方案:顺序正确,耗时增加

//递归上传方案
const upload = function (imgArr, i = 0) {
  return new Promise((reslove, reject) => {
    //迭代体放在promise中
    let fileIDs = [];
    function uploadImg(imgArr, i) {
      if (imgArr.length <= i) {
      //将fileIDs放入reslove中
        reslove(fileIDs);
        return;
      } else {
        let cloudPath =
          "postImage/" + new Date().getTime() + imgArr[i].match(/\.[^.]+?$/)[0]; //文件名
        wx.cloud.uploadFile({
          cloudPath,
          filePath: imgArr[i],
          success: (res) => {
            fileIDs.push(res.fileID);
            uploadImg(imgArr, i + 1);
          },
        });
      }
    }
    //不要忘记调用
    uploadImg(imgArr, i);
  });
};

//upload传入图片数据等待完成
upload(temp).then(res=>{
//将获取的fileID转换为真实链接
//......
})
  • 递归方案之后获取的fileID顺序正确,处理时间也正确

1 回复
改方案后整个上传耗时增加的多不多?
回到顶部