Angularjs $ http和进度条

Question

我需要上传文件,我使用$ http(这段代码来自我的.service()函数):

sendFile: function (params) {
            return $http({method : 'post',
                url : 'http://XXXXXXXXXXXXX/rest/file.json',
                headers : { 'X-CSRF-Token' : $cookies['csrftoken']},
                data : params
            })
        },

现在,对于小文件和良好的线路没有问题,但是对于大文件和/或坏/慢线路存在UI问题:用户无法知道何时上传将结束.我需要一个进度条.

所以我在互联网上搜索,但我还没有找到解决方案.是否有可能从$ 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)
                        }
                    );

永远不会调用"进度"功能.

我正在使用角度1.2.x

谢谢.

Answer 1

您可以使用Angular Loading Bar.它可以自动处理$http请求,除了将其添加为app依赖项外,不需要任何设置.

angular.module('app', ['angular-loading-bar']); // that's all

Answer 2

我强烈推荐ng-progress.这会处理多个请求,并且基本上为所有http活动显示一个整洁的小进度条.

http://victorbjelkholm.github.io/ngProgress/

Answer 3

您可以通过隐藏/显示加载栏来解决此问题。上传开始后开始显示加载栏，并在上传完成后删除加载栏（在$http 请求的成功处理程序中）。

我为您创建了一个简单的 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);
    }
}

有关其工作原理的演示，请参阅此 fiddle。

更新

通过评论中的澄清，您希望能够按百分比跟踪上传进度。例如。上传完成还有多少%

您应该查看这篇 SO 帖子，其中已经对此进行了讨论。

从接受的答案来看：

我认为 $http.post() 不能用于此目的。至于客户端，它应该与 HTML5 浏览器一起使用，但您可能必须创建自己的 XMLHttpRequest 对象和onprogress侦听器。请参阅AngularJS：跟踪同时上传的每个文件的状态以获取想法。