检测AngularJS中异步文件上传的进度答案

【问题标题】：Detect progress of Async file(s) upload in AngularJS检测AngularJS中异步文件上传的进度
【发布时间】：2017-03-29 16:04:19
【问题描述】：

我正在尝试将我的文件在打开后上传到服务器上。我的服务中有一个函数并调用该服务来上传我的文件。这是我的服务功能。

function post(file) {
var file = file;
if (angular.isDefined(file)) {
  return Upload.upload({
    url: filesConfig.uploadFile,
    data: {
      file: file
    }
  }).then(function (response) {         
      return response;
    },
    function (error) {
      return error;
    },
    function (evt) {
      var progress = parseInt(100.0 * evt.loaded / evt.total);         
      console.log('progress: ' + progress + '% ' + evt.config.data.file.name);
    });
}


 }

在最后一个 evt arg 函数中，我在变量方面取得了进展。我正在像这样从控制器调用这个 post 函数。

 angular.element(document.querySelector('#fileinput')).on('change', function () {
for (var i = 0; i < this.files.length; i++) {
  vm.filess.push(this.files[i]);
  fileUpload.post(vm.filess[i]).then(function (response) {  
    console.log(response);  
  });
}
 });

现在我想检测控制器中每个文件的进度，以在 UI 中显示进度条。如何检测进度？

【问题讨论】：

1 - 使用您作为参数发送给post(file, callback) 的回调，然后在每次进度更改时执行回调；或 2 - 每次进度更改时使用 pub/sub 调度事件，然后在控制器中订阅此事件；或 3 - 使用一个调解器/管理器/服务对象来保持对此进度的引用并在每一步更新它，然后将此引用注入您的控制器并使用它；或 4 - 在您的服务中使用进度值（例如 file.progress = progress）更新 file 的参考 - 虽然不太直观
你能用代码示例详细说明一下吗？

标签： javascript html angularjs

【解决方案1】：

下面是最快和最脏的解决方案。

在控制器中：

angular.element(document.querySelector('#fileinput')).on('change', function() {
  for (var i = 0; i < this.files.length; i++) {
    var item = {
      file: this.files[i]
    }; 

    vm.filess.push(item);

    fileUpload.post(item).then(function (response) {  
      console.log(response);  
    });
  }
});

服役中：

function post(item) {
  var file = item.file;

  if (angular.isDefined(file)) {
    return Upload.upload({
      url: filesConfig.uploadFile,
      data: {
        file: file
      }
    }).then(function (response) {         
        return response;
      },
      function (error) {
        return error;
      },
      function (evt) {
        item.progress = parseInt(100.0 * evt.loaded / evt.total);
      });
  }
}

这样做，您将file 包装在一个项目对象中，并将file 作为该对象的属性。在您的服务中，您正在直接修改项目的引用。

在视图中，您只需要循环访问vm.filess，就可以访问添加的动态属性progress。

不是最好的解决方案，我认为这是我能想到的最快的解决方案。

【讨论】：