在 angularjs 1.6.5 中需要 $http 方法的进度条

Question

我想要做的是向我的模板添加一个进度条，该进度条将根据我的文件上传进度动态地不断更新其值。我使用了 angular-loading-bar，但我想为以下 $http 请求拥有自己的：-

        $http.patch(url, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).then(successCallback, errorCallback);
        function successCallback(response){
            console.log("Success");
            console.log(response);
        };
        function errorCallback(error){
            alert("Error Uploading!");
            console.log(error);
        };

我想更新我的以下进度条：-

<div class="progress">
     <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ progress }} %">
        {{ progress }} %
     </div>
</div>

{{ progress }} 应该是我的文件上传百分比值。提前致谢。

Answer 1

你可以添加uploadEventHandlers，如下图：-

        $http.patch(url, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined},
            uploadEventHandlers: {
                progress: function (e) {
                          if (e.lengthComputable) {
                             $scope.progressBar = (e.loaded / e.total) * 100;
                             console.log($scope.progressBar)
                          }
                }
            }
        }).then(successCallback, errorCallback);
        function successCallback(response){
            console.log("Success");
            console.log(response);
        };
        function errorCallback(error){
            alert("Error Uploading!");
            console.log(error);
        };

然后在html中：-

<div class="progress">
     <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="{{progressBar}}" aria-valuemin="0" aria-valuemax="100" style="width: {{progressBar}}%">
                                                {{progressBar}}
     </div>
 </div>