javascript - angular $http $watch 文件上传过程中的进度

Question

我有这样一个函数:

$scope.fileUpload = function (files) {
                angular.forEach(files, function () {
                    var fd = new FormData();
                    fd.append('files[]', files[0]);

                    $http.post('/my-url', fd, {
                        transformRequest: angular.identity,
                        headers: {
                            'Content-Type': undefined}
                    }).then(function (data) {
                        console.log(data);
                    });
                });
            };

和模板:

<input type="file"
               name="files[]"
               id="fileUploaderButton_contentFormFiles"
               onchange="angular.element(this).scope().fileUpload(files)"
               multiple>
<div class="progress" id="fileUploaderProgressbar_contentFormFiles">
    <div class="progress-bar progress-bar-striped active"
         role="progressbar"
         aria-valuenow="{{progress}}"
         aria-valuemin="0"
         aria-valuemax="100"
         style="min-width: 2em; width: {{progress}}%">
        <span>{{progress}}%</span>
    </div>
</div>

我如何 $watch 上传文件的传输值(字节)，以便我可以在 $http 请求期间更新进度条中的 {{progress}} (使用 native Angular 特征)？提前致谢。

Answer 1

不是你想要的答案但是你的做法是错误的

你应该使用 ng-file-upload这是对此的标准 Angular 方法，并支持上传进度跟踪