如何使用angularjs显示文件上传的进度条

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>

<div ng-app="myApp">
  <!-- 应用程序的内容 -->
</div>

<input type="file" ng-model="file" />

<div ng-style="{'width': progress + '%'}" ng-show="progress > 0" class="progress-bar"></div>

angular.module('myApp', [])
  .controller('myController', function($scope, $http) {
    $scope.uploadFile = function() {
      var formData = new FormData();
      formData.append('file', $scope.file);

      $http.post('/upload', formData, {
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined},
        uploadEventHandlers: {
          progress: function(e) {
            if (e.lengthComputable) {
              $scope.progress = Math.round((e.loaded / e.total) * 100);
              $scope.$apply();
            }
          }
        }
      }).then(function(response) {
        // 文件上传成功的处理逻辑
      }, function(error) {
        // 文件上传失败的处理逻辑
      });
    };
  });

<div ng-controller="myController">
  <input type="file" ng-model="file" />
  <button ng-click="uploadFile()">上传</button>
  <div ng-style="{'width': progress + '%'}" ng-show="progress > 0" class="progress-bar"></div>
</div>