Angularjs $ http和进度条
我需要上传文件，我使用$ http（这个代码是从我的.service（）函数）：
sendFile: function (params) { return $http({method : 'post', url : 'http://XXXXXXXXXXXXX/rest/file.json', headers : { 'X-CSRF-Token' : $cookies['csrftoken']}, data : params }) }, 现在，对于小文件和好行来说没有问题，但是对于大文件和/或坏/慢行来说，存在UI的问题：用户无法知道上传何时结束。 我需要一个进度条。
所以我在互联网上search，但我还没有find解决scheme。 有没有可能从$ http获得一些进展/通知？
我已经试过这个代码没有运气：
ProfileService.sendFile(data) .then(function(ret) { var uri = ret.data.uri; scope.content = "Upload finished"; scope.postForm.fid = ret.data.fid; scope.postForm.buttonDisabled = false; }, function(error) { scope.postForm.showError = true; scope.postForm.errorMsg = error.data; }, function(progress) { console.log("inside progress"); console.log(progress) } );
“进度”function永远不会被调用。
我正在使用angular1.2.x
谢谢。
你可以使用Angular Loading Bar 。 它自动为$http请求工作，不需要任何设置，除了将其作为应用程序依赖项添加。
angular.module('app', ['angular-loading-bar']); // that's all
我强烈build议ng进展。 这处理多个请求，基本上显示所有HTTP活动一个整洁的一点进度条。
你可以通过隐藏/显示一个加载栏来解决这个问题。 上传开始后，开始显示加载栏，并在上传完成时（在$ http请求的成功处理程序中 ）删除加载栏。
我为你创build了一个简单的jsfiddle来向你展示一个例子。
我使用$timeout来模拟$http请求。
Html标记：
<div ng-controller="MyCtrl"> <!-- this can be an image if you want --> <p ng-show="loading">...LOADING...</p> <!-- Showing the status --> <p ng-hide="loading">{{status}}</p> <button type="button" ng-click="upload()">Do $http request</button> </div>
Js控制器：
function MyCtrl($scope, $timeout) { $scope.status = 'Not started'; $scope.loading = false; $scope.upload = function() { $scope.loading = true; // Simulating a http request with a timeout $timeout(function(){ $scope.status = "Finished"; $scope.loading = false; },3000); } }
为了演示这是如何工作的， 请看这个小提琴 。
更新
通过在评论中澄清，您希望能够按百分比跟踪上传进度。 例如。 直到上传完成了多less％
你应该看看这个SOpost ，这已经讨论过了。
从接受的答案：
我不认为$ http.post（）可以用于这个。 至于客户端，它应该使用HTML5浏览器，但是您可能必须创build自己的XMLHttpRequest对象和进行中的侦听器。 请参阅AngularJS：跟踪每个正在同步上传的文件的状态 。
您可以简单地使用$ http服务的eventHandlers
喜欢：
mainModule.service('File', function (Api) { var controller = 'files'; function File(data) { this.$data = data; } File.__proto__ = File.prototype = { upload: function (progress) { var fd = new FormData(); fd.append('file', this.$data); return pack('/upload').post(fd, { transformRequest: angular.identity, uploadEventHandlers: {'progress': progress}, headers: {'Content-Type': undefined} }); } }; return File; function pack(action) { return Api(controller + action); } });
Api是一个与服务器API连接的服务。
$ data是来自input的文件对象
如果你不想在每一个http方法中写show hide，那么我们可以使用$http.pendingRequests.length和and来创build一个简单的指令。
每当我们有任何HTTP请求正在进行，它将自动显示。
app.directive('loading', ['$http', function ($http) { return { restrict: 'A', link: function (scope, elm, attrs) { scope.isLoading = function () { return $http.pendingRequests.length > 0; }; scope.$watch(scope.isLoading, function (v) { if (v) { elm.show(); } else { elm.hide(); } }); } }; }]);
和HTML
<div data-loading> Please wait... </div>
欲了解更多详情，请参阅
