Angular JS - $q.all() 追踪单个上传进度

Question

Angular JS - $q.all() 追踪单个上传进度

javascriptajaxangularjsqangular-file-upload

3

我正在使用danialfarid的angular-file-upload模块(https://github.com/danialfarid/angular-file-upload)，它非常好用。

我已经成功地将其整合到我的REST调用包装器服务中，我可以使用$q.all()上传多张图片并跟踪它们的进度。

然而，由于for循环不断改变文件标识符，我无法正确地识别我正在上传的单个图像。

      uploadPhotos: function (files) {

        var deferred = $q.defer()
        var queue = []

        for (var i = 0; i < files.length; i++) {
          var file = files[i];
          var up = $upload.upload({
            url: locationURI +'/photos',
            file: file,
            fileFormDataName: 'image'
          }).then(
            function (data) {
              console.log(data)
            },
            function (err) {
              console.log(err)
            },
            function(evt) {
              // progress events
              console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
            }
          )
          queue.push(up)
        }

        $q.all(queue).then(
          function (data) {
            deferred.resolve(data)
          },
          function (err) {
            deferred.reject(err)
          }
        )

        return deferred.promise
      }

这毫不意外，是我得到的混乱输出：

    percent: 68 restfactory.js:359
    percent: 100 restfactory.js:359
    percent: 100 restfactory.js:359
    percent: 14 restfactory.js:359
    percent: 37 restfactory.js:359
    percent: 52 restfactory.js:359
    percent: 89 restfactory.js:359
    percent: 100 restfactory.js:359
    percent: 100 restfactory.js:359

你有没有想过如何实现类似以下的功能：

    file1 - percent: 68 restfactory.js:359
    file1 - percent: 100 restfactory.js:359
    file2 - percent: 100 restfactory.js:359

- domokun

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nikos Paraskevopoulos · Accepted Answer

循环中的闭包比较棘手。如果闭包引用了循环变量，它将始终获取最后一个值（例如，参见这个问题，并谷歌查找更多理论/细节）。你想要的是在循环内调用另一个函数：

for (var i = 0; i < files.length; i++) {
    var up = doTheUpload(files[i]);
    queue.push(up);
}

而 doTheUpload() 包含您的原始代码，返回承诺并使用正确的 file (我不知道API，我假设 file.name 包含文件名；请适当调整)：

function doTheUpload(file) {
      var up = $upload.upload({
        url: locationURI +'/photos',
        file: file,
        fileFormDataName: 'image'
      }).then(
        function (data) {
          console.log(data)
        },
        function (err) {
          console.log(err)
        },
        function(evt) {
          // progress events
          console.log(file.name + ' percent: ' + parseInt(100.0 * evt.loaded / evt.total));
        }
      );
      return up;
}