Angularjs $ http和进度条 [英] Angularjs $http and progress bar

问题描述

我需要上传文件，我使用$ HTTP（这code是我的。服务得到（）函数）：

I need to upload file and I use $http (this code is get from my .service() function):

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

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

Now, for little file and a good line there is no problem, but with a big file and/or a bad/slow line there is a problem of UI: user can not know when upload will be end. I need a progress bar.

所以我互联网上搜索，但我还没有找到一个解决方案。是否有可能获得从$ HTTP一些进展/通知？

So I have search on internet, but I have not found a solution. Is there a possibility to get some progress/notification from $http ?

我已经试过这code没有运气：

I have tried this code without luck:

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)
                        }
                    );

进步的功能不会被调用。

"progress" function is never called.

我采用了棱角分明的1.2.x

I'm using angular 1.2.x

感谢。

推荐答案

您可以使用角加载条 。它会自动适用于 $ HTTP 请求，不需要任何设置，除了将其添加为应用程序的依赖性。

You can use Angular Loading Bar. It works automatically for $http requests and does not need any setup except adding it as app dependency.

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

这篇关于Angularjs $ http和进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！