Question

我打算在打开服务器后上传我的文件。我在我的服务中有一个功能，并调用该服务来上传我的文件。这是我的服务功能。

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中的进度条。如何检测进度？

Answer 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。

这不是最好的解决方案，我认为这是我能用你的设置最快的。

检测AngularJS中异步文件上载的进度

1 个答案: