收藏
回答

循环内的wx.cloud.uploadFile返回值无法和index同步怎么办?

搞了好几天了解决不了,有没有大神为我解答?

云开发上传多个图片,用户选择多个图片,上传时显示进度,上传完成后图片按照当时的选择顺序显示。

代码大致结构如下:

data: {
  imagesPreview: []
},
postImages: function() {
  wx.chooseImage({
    //选择9张图片
    success: function(res) {
      var filePaths = res.filePaths
       
      //把本地临时路径放在集合里
      for (var in filePaths) {
        var imagesTemp = { 'filePath': filePaths[i], 'fileID''''progress': 0 }
        that.data.imagesPreview.push(imagesTemp)
      }
 
      //再一次循环,根据上传返回结果依次改变集合内的对应值
      for (var in filePaths) {
        var filePath = that.data.imagesPreview[j].filePath
        var fileName = common.getUniqueFileName(app.globalData.userInfo._id)
        var cloudPath = fileName + filePath.match(/\.[^.]+?$/)[0]
        var uploadTask = wx.cloud.uploadFile({
          //...
          success: res => {
            that.data.imagesPreview[j].fileID = res.fileID
            that.setData({
              imagesPreview: that.data.imagesPreview
            })
          }
        })
 
        uploadTask.onProgressUpdate((res) => {
          that.data.imagesPreview[j].progress = res.progress
          that.setData({
            imagesPreview: that.data.imagesPreview
          })
        })
      }
    },
  })
},


比如选了3张图片

imagePreview = [
 
{'filePath':'地址1','fileID':'','progress':0},
 
{'filePath':'地址2','fileID':'','progress':0},
 
{'filePath':'地址3','fileID':'','progress':0}
 
]


当准备上传这3张图片时,进度progress只会在最后一个{'filePath':'地址3','fileID':'','progress':0}里面更新,返回的fileID也是。

查了遍console.log,应该是由于上传文件是异步处理,遍历完了之后uploadFile结果还没返回,并且j停留在集合最后一个。

所以问题来了,要做到fileID和progress都能在集合内对应的位置更新该怎么办?


最后一次编辑于  2019-11-05
回答关注问题邀请回答
收藏

3 个回答

  • 老张
    老张
    2019-11-05

    此时不用async还待何时?

    2019-11-05
    赞同
    回复 1
    • z.song
      z.song
      2019-11-05
      谢谢!又学到了个知识点
      2019-11-05
      回复
  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    2019-11-05

    postImages: function() {

        var t = this

        wx.chooseImage({

            //选择9张图片

            success: function (res) {

                var filePaths = res.filePaths, fileList = []

                

                //把本地临时路径放在集合里

                for (var i in filePaths) {

                    fileList.push({ 'filePath': filePaths[i], 'fileID': '', 'progress': 0 })

                }

                if (fileList.length <= 0) return

                

                t.setData({

                    imagesPreview: fileList

                })

                t.uploadLoop(fileList, 0)

            },


        })

    },

    uploadLoop(fileList, idx){

        var t = this

        var filePath = fileList[idx].filePath

        var fileName = common.getUniqueFileName(app.globalData.userInfo._id)

        var cloudPath = fileName + filePath.match(/\.[^.]+?$/)[0]

        wx.cloud.uploadFile({

            //...

            success(res) {

                t.setData({

                    ['imagesPreview.' + idx + '.fileID']: res.fileID

                })

            },

            fail(err) {

                console.error(fileList[idx], err)

            },

            complete(res){

                idx + 1 <= fileList.length && t.uploadLoop(fileList, idx + 1)

            }

        }).onProgressUpdate((res) => {

            t.setData({

                ['imagesPreview.' + idx + '.progress']: res.progress

            })

        })

    }


    2019-11-05
    赞同
    回复 1
    • z.song
      z.song
      2019-11-05
      明白了,原来是在complete里处理下一循环。多谢!
      2019-11-05
      回复
  • 少年啦
    少年啦
    2019-11-05

    善用promise

    2019-11-05
    赞同
    回复 1
    • z.song
      z.song
      2019-11-05
      谢谢 我看下
      2019-11-05
      回复
登录 后发表内容
问题标签