Question

我正在努力取得进步＆＃39;来自AngularJS $ http POST文件上传请求的事件。

在查看$http upload file progress in AngularJS之后，我遇到了一个最近的angular.js git提交，它假设要解决问题Add XHR progress event handling to $http and $httpBackend。

有没有人实现这一目标？如果是这样，可以展示这个例子吗？

PS。我更喜欢使用$ http，而不是创建自己的XMLHttpRequest。原因是我的后端希望将json对象与多部分文件数据结合起来。并且尝试通过XMLHttpRequest失败，并显示错误消息，即后端没有看到请求的json对象部分＆＃34;必需字符串参数＆＃39; objData＆＃39;不在场。客户端发送的请求在语法上是不正确的。＆＃34;在POST消息中，我看到＆＃34; Content-Disposition：form-data;名称=＆＃34; objData＆＃34;＆＃34;在Firebug中。

   $scope.uploadFile = function() {
    var url = buildUrl('/upload');
    var data = {objData: $scope.data, fileData: $scope.file};
    var formData = new FormData();

    formData.append("objData", angular.toJson(data.objData));
    formData.append("fileData", data.fileData);

    var xhr = new window.XMLHttpRequest();

    xhr.upload.addEventListener("progress", uploadProgress, false);

    xhr.open("POST", url);
    xhr.setRequestHeader("Content-Type","application/json;charset=utf-8");
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.send(formData);
};

Answer 1

在撰写本文时，$http不支持新1.2 $q的通知方法。所以你必须使用jquery xhr。设置起来相当简单：

请注意，我们会返回一个承诺，因此uploadFile的消费者会uploadFile(..).then(success, fail, progress)

$scope.uploadFile = function() {
  var deferred = $q.defer();
  var getProgressListener = function(deferred) {
    return function(event) {
      //do some magic
      deferred.notify(magic);
    };
  };
  var formData = new FormData();

  formData.append("objData", angular.toJson(data.objData));
  formData.append("fileData", data.fileData);

  $.ajax({
    type: 'POST',
    url: buildUrl('/upload'),
    data: formData,
    cache: false,
    // Force this to be read from FormData
    contentType: false,
    processData: false,
    success: function(response, textStatus, jqXHR) {
      deferred.resolve(response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      deferred.reject(errorThrown);
    },
    xhr: function() {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
         myXhr.upload.addEventListener(
            'progress', getProgressListener(deferred), false);
      } else {
        $log.log('Upload progress is not supported.');
      }
      return myXhr;
    }
  });
  return deferred.promise;
};

AngularJS $ http POST中文件上传进度的示例

1 个答案: