Angular JS中带进度条的文件上传

<div ng-app="fileUploadApp" ng-controller="fileUploadController">
  <input type="file" ng-model="file" ng-change="uploadFile()" />
  <div ng-show="uploadProgress > 0">
    Upload Progress: {{ uploadProgress }}%
  </div>
</div>

var app = angular.module('fileUploadApp', []);

app.controller('fileUploadController', ['$scope', '$http', function($scope, $http) {
  $scope.uploadFile = function() {
    var file = $scope.file;
    var formData = new FormData();
    formData.append('file', file);

    $http.post('/upload', formData, {
      headers: { 'Content-Type': undefined },
      transformRequest: angular.identity,
      uploadEventHandlers: {
        progress: function(e) {
          if (e.lengthComputable) {
            $scope.uploadProgress = Math.round((e.loaded / e.total) * 100);
          }
        }
      }
    }).then(function(response) {
      console.log('File uploaded successfully');
    }, function(error) {
      console.log('File upload failed');
    });
  };
}]);