我正在尝试从 AngularJS $http POST 文件上传请求中获取“进度”事件。
看了之后$http upload file progress in AngularJS ,我遇到了一个最近的 angular.js git commit,假设可以解决这个问题 Add XHR progress event handling to $http and $httpBackend .
有没有人实现这个工作?如果是这样,请举例说明?
附注。我更愿意使用 $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的notify方法$q
.所以你必须使用jquery xhr。一旦设置,它就相当简单:
请注意,我们返回了一个 promise ,因此您的 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 - AngularJS $http POST 文件上传进度示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18860103/