评论

按照顺序上传图片获取fileID(原方案数据混乱、递归上传方案)

2个方案都是为了处理图片上传。 第一个为原方案获取的fileID混乱 第二个为递归方案,图片fileID顺序正确,但耗时增加

原方案是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顺序正确,处理时间也正确

最后一次编辑于  2021-05-11  
点赞 1
收藏
评论

2 个评论

  • LZQ
    LZQ
    2021-11-30

    这纯粹是代码写的烂,根本不用改方案。

    fileIDs.concat 连接数组改为 fileIDs[i] 按索引赋值就行了。

    2021-11-30
    赞同
    回复 1
    • TANGYC_
      TANGYC_
      2023-06-28
      但是这样子的话  分两次上传就有问题了
      2023-06-28
      回复
  • less
    less
    2021-05-11
    改方案后整个上传耗时增加的多不多?
    
    2021-05-11
    赞同
    回复 5
    • 钰宅宅宅🐳🐱
      钰宅宅宅🐳🐱
      2021-05-11
      那可能需要优化一下,毕竟递归是为了保证图片的正确顺序,如果单纯考虑耗时,那肯定没有优化的递归会比遍历耗时长
      2021-05-11
      回复
    • less
      less
      2021-05-11回复钰宅宅宅🐳🐱
      我有一个鬼点子,
      就是在拼接cloudPath时,在第一张前加A,第二张加B…
      后面返回的数组(乱序)再排序一下
      2021-05-11
      回复
    • less
      less
      2021-05-11
      2021-05-11
      回复
    • 钰宅宅宅🐳🐱
      钰宅宅宅🐳🐱
      2021-05-11回复less
      我的文件名确实长了(无法反驳)
      2021-05-11
      回复
    • 钰宅宅宅🐳🐱
      钰宅宅宅🐳🐱
      2021-05-11回复less
      我之前其实在考虑尾递归的可能性,完全忘记了 async
      2021-05-11
      回复
登录 后发表内容