收藏
评论

上传多个图片给后端,使用promise.all处理上传因网络原因出现的异步问题

上传多个图片给后端,前后端临时地址与后端写入的文件顺序保持相同。


小程序

wx.chooseImage 进行图片文件上传,返回的临时地址,在前端排序是按用户所选的顺序来的,但是上传给后端往往会因为网络和图片文件大小的原因,导致,用户选的第二张很大的图片排在了最后面,导致后端返回图片位置跟前端一开始选的位置不一致。


可使用promise.all 处理异步问题。。


案例代码参考:

chooseImage: function (e) {
 
    var self = this;
 
    let files = self.data.files || [];
    let maxLength = 3;
    let count = maxLength - files.length;
 
    wx.chooseImage({
      count: count,
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        let imageUrl = res.tempFilePaths;
        console.log("chooseImage imageUrl=>", imageUrl)
 
        var p = [];
        imageUrl.forEach((it, index) => {
          self.setData({
            files: self.data.files.concat(it),
            previewfiles: self.data.previewfiles.concat(it)
          });
          var myPromise = new Promise((resolve, reject) => {
            self.uploadfileMultiple(it, function (relativePath) {
         
              resolve(relativePath[0]);
            });
          });
          p.push(myPromise);
        });
        console.log("p=>", p);  // 数组
        Promise.all(p).then(uploadFiles => {
          console.log("relativePath uploadFiles=>", uploadFiles);
          self.setData({
            uploadFiles: uploadFiles
          });
        }, reason => {
          console.log("relativePath reason=>", reason);
        });
 
 
      }
    });
 
 
     
  },
  uploadfileMultiple: function (filePath, callback) {
    var self = this;
    var ticket = wx.getStorageSync('ticket');
    try {
      let formData = {
        ticket: ticket,
        folder: "folder/pic"
      }
 
      console.log("formData=>", formData)
      util.uploadFile({
        url: 'api/uploadFiles.do', // 仅为示例,非真实的接口地址
        filePath: filePath,
        name: 'file',
        formData: formData,
        success(res) {
          console.log("wx.uploadFile res=>", res);
 
          let resData = res.data;
 
          if (typeof resData == "string") {
            resData = JSON.parse(resData);
          }
          if (resData.rstId == 1) {
            let obj = resData.object || [];
            let relativePath = obj[0].relativePath;
            if (!!callback) {
              callback([relativePath]);
            }
 
          } else {
            wx.showToast({
              title: '上传失败',
            })
          }
        }
      }, true)
    } catch (e) {
      console.log(e)
    }
  },



最后一次编辑于  02-12  (未经腾讯允许,不得转载)
复制链接收藏赞 1

3 个评论

  • 唏嘘
    唏嘘
    02-14

    我也写了类似的  下次我也分享下

    02-14
    赞同
    回复 1
    • 同步
      同步
      02-14

      哦哦,可以分享下的

      02-14
      回复
  • 怪诞咖啡
    怪诞咖啡
    02-15

    好思路,mark

    02-15
    赞同
    回复