Angularjs $http 및 진행률 바

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의 문제가 있습니다.사용자는 업로드가 언제 끝날지 알 수 없습니다.경과표시 막대가 필요해요

그래서 인터넷으로 검색을 해봤지만 해결책을 찾지 못했습니다.$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)
                        }
                    );

"syslog" 함수는 호출되지 않습니다.

각진 1.2.x를 사용하고 있습니다.

감사해요.

Angular Loading Bar(각하중 막대)를 사용할 수 있습니다.다음 시간 동안 자동으로 동작합니다.$http앱 의존관계로 추가하는 것 이외에는 셋업이 필요 없습니다.

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

ng-progress를 강력히 추천합니다.그러면 여러 요청이 처리되며 기본적으로 모든 http 액티비티에 대한 깔끔한 진행 표시줄이 표시됩니다.

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

로드바를 숨기거나 표시하여 해결할 수 있습니다.업로드가 시작되면 로드바를 표시하고 업로드가 완료되면 로드바를 제거합니다($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를 직접 .onprogress청취자"각" 참조JS: 아이디어를 위해 동시에 업로드되는 각 파일의 상태를 추적합니다.

$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는 입력의 파일 객체입니다.

메서드에 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>

상세한 것에 대하여는, 여기를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/23206243/angularjs-http-and-progress-bar