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

為了演示這是如何工作的， 請看這個小提琴 。

更新

通過評論中的說明，您希望能夠按百分比跟蹤上傳的進度。 例如。 上傳完成的百分之幾

你應該看看這個已經討論過的SO帖子 。

從接受的答案：

我不認為$ http.post（）可以用於此。 至於客戶端，它應該與HTML5瀏覽器一起使用，但您可能必須創建自己的XMLHttpRequest對象和onprogress偵聽器。 請參閱AngularJS：跟蹤同時上傳的每個文件的狀態以獲取創意。

Answer 4

您只需使用$ 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是輸入中的文件對象

Answer 5

如果你不想在每個http方法中編寫show hide，那么我們可以使用$http.pendingRequests.length創建一個簡單的指令，就是這樣。

每當我們正在進行任何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>

有關詳細信息，請參閱此