6

我目前正在使用角度指令上传文件...

var fd = new FormData();
fd.append("uploadedFile", scope.uploadedFile);

var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListenter("load", uploadComplete, false);
xhr.addEventListenter("error", uploadFailed, false);
xhr.addEventListenter("abort", uploadCanceled, false);
xhr.open("POST", scope.postUrl);
scope.uploadInProgress = true;
xhr.send(fd);

function uploadProgress(e){
  scope.$apply(function(){
    if(e.lengthComputable){
      scope.progress = Math.round(e.loaded * 100 / e.total);
    } else {
      scope.progress = 'unable to compute';
    }
  });
 }

 ...

可以使用 $http 提供程序重构此代码段吗？我不知道如何保留我的事件监听器。

4

2 回答 2

3

简短的回答：很快你就可以了，但还不能完全按照你的要求。

正在讨论一些选项来构建功能 - 公开基础xhr对象，或允许为方法设置回调。

具体参见https://github.com/angular/angular.js/issues/1934 - 进度事件暂时不起作用。

同时，我建议手动创建一个对象并使用$apply它来更新您的范围，就像您所做的那样。

有关如何使用服务设置至少可以捕获的开始和停止事件的更多详细信息，请参阅此问题 - 但进展不顺利。

AngularJS：每次启动ajax调用时都需要触发事件

于 2013-04-15T21:35:13.173 回答
1

现在，您可以使用简单/轻量级的 angular-file-upload指令，并支持文件删除和上传进度。它使用 shim 在 angular 之前加载，以便能够以 angular 访问 XHR 私有对象并将上传事件侦听器附加到它。

<div ng-controller="MyCtrl">
  <input type="file" ng-file-select="onFileSelect($files)" multiple>
</div>

JS：

//inject angular file upload directive.
angular.module('myApp', ['angularFileUpload']);

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {
    for (var i = 0; i < $files.length; i++) {
      var $file = $files[i];
      $upload.upload({
        url: 'my/upload/url',
        file: $file,
        progress: function(evt){
           $scope.progress = parseInt(100.0 * evt.loaded / evt.total);
        }
      }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      }); 
    }
  }
}];
于 2013-10-28T22:42:58.840 回答