Angular 1.5.4 $ http进度事件

Question

现在,Angular 1.5.4最终允许您跟踪$ http提供程序上的进度事件,但出于某种原因,我一直将$ rootScope作为响应而不是实际进度(我将其用于上传)信息.由于缺乏示例,我在Angular回购中找到了一些测试并遵循了但没有成功.

restClientInstance.post = function (requestParams) {
    var postParams = {
        method: "POST",
        url: API_URL + requestParams.url,
        headers: requestParams.headers,
        data: requestParams.data,
        eventHandlers: {
            progress: function (c) {
                console.log(c);
            }
        },
        uploadEventHandlers: {
            progress: function (e) {
                console.log(e);
            }
        }
    };

    var promise = $http(postParams)
    $rootScope.$apply();
    return promise;
};

在这两种情况下,它都安装$ rootScope而不是lengthComputable

Answer 1

在AngularJS v1.5.7中工作正常.如果你有机会我推荐升级!

...//formData = new FormData(); etc...
var postParams = {
    method: 'POST',
    url: yourURLWS,
    transformRequest: angular.identity,
    uploadEventHandlers: {
        progress: function (e) {
                  if (e.lengthComputable) {
                     $scope.progressBar = (e.loaded / e.total) * 100;
                     $scope.progressCounter = $scope.progressBar;
                  }
        }
    },
    data: formData,
    headers: {'Content-Type': undefined }
};

var sendPost = $http(postParams); //etc...

在HTML中你有:

<progress id="progress" max="100" value="{{progressBar}}"></progress>{{progressCounter}}%

结果:

进展结果

Answer 2

好吧，我最终做了这样的事情，并且自己处理它，因为添加到 $http 的 XHR 事件对我不起作用。

var xhttp = new XMLHttpRequest();
var promise = $q.defer();

xhttp.upload.addEventListener("progress",function (e) {
    promise.notify(e);
});
xhttp.upload.addEventListener("load",function (e) {
    promise.resolve(e);
});
xhttp.upload.addEventListener("error",function (e) {
    promise.reject(e);
});

xhttp.open("post",API_URL + requestParams.url,true);

xhttp.send(requestParams.data);

return promise.promise;