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

发布时间：2020-12-17 10:21:36 所属栏目：安全来源：网络整理

导读：我正试图从AngularJS $http POST请求获取文件上传的“进度”事件. 在查看了$http upload file progress in AngularJS之后,我遇到了一个最近的angular.js git commit,它假设要解决问题Add XHR progress event handling to $http and $httpBackend. 有没有人实

我正试图从AngularJS $http POST请求获取文件上传的“进度”事件.

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

有没有人实现这个工作？如果是这样,可以展示这个例子吗？

PS.我宁愿继续使用$http而不是创建自己的XMLHttpRequest.原因是我的后端希望将json对象与多部分文件数据结合起来.并且尝试通过XMLHttpRequest失败,并显示错误消息,即后端未看到请求的json对象部分“必需字符串参数’objData’不存在.客户端发送的请求在语法上是不正确的.”在POST消息中,我在Firebug中看到“Content-Disposition：form-data; name =”objData“”.

$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);
};

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

请注意,我们返回一个promise,因此uploadFile的使用者将执行uploadFile(..).然后(成功,失败,进度)

$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,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;
};

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!