现在,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}}%
结果: