现在,Angular 1.5.4最终允许您跟踪$http提供程序上的进度事件,但出于某种原因,我一直将$rootScope作为响应而不是实际进度(我用它来上传)信息.由于缺乏示例,我在Angular回购中找到了一些测试并遵循了但没有成功.
restClientInstance.post = function (requestParams) {
var postParams = {
method: "POST",url: API_URL + requestParams.url,headers: requestParams.headers,data: requestParams.data,eventHandlers: {
progress: function (c) {
console.log(c);
}
},uploadEventHandlers: {
progress: function (e) {
console.log(e);
}
}
};
var promise = $http(postParams)
$rootScope.$apply();
return promise;
};
在这两种情况下,它都安装$rootScope而不是lengthComputable
解决方法
在AngularJS v1.5.7中工作正常.如果你有机会我推荐升级！
...//formData = new FormData(); etc...
var postParams = {
method: 'POST',url: yourURLWS,transformRequest: angular.identity,uploadEventHandlers: {
progress: function (e) {
if (e.lengthComputable) {
$scope.progressBar = (e.loaded / e.total) * 100;
$scope.progressCounter = $scope.progressBar;
}
}
},data: formData,headers: {'Content-Type': undefined }
};
var sendPost = $http(postParams); //etc...
在HTML中你有：
<progress id="progress" max="100" value="{{progressBar}}"></progress>{{progressCounter}}%
结果：
