AngularJS 1.6.5中为$http文件上传请求自定义进度条

Hey there! 想给这个文件上传的$http.patch请求加个自定义的动态进度条是吧？其实不用依赖angular-loading-bar，Angular原生的$http就支持监听上传进度，我给你一步步讲怎么实现：

1. 先在模板里添加进度条结构 #

你可以用项目里已有的UI组件（比如Bootstrap进度条），或者自己写个简单的原生结构，举个基础例子：

<!-- 进度条容器 -->
<div class="upload-progress-container">
  <div class="upload-progress-bar" style="width: {{ uploadProgress }}%"></div>
</div>
<!-- 可选：显示进度百分比文本 -->
<p>上传进度：{{ uploadProgress }}%</p>

搭配一点基础CSS让它看起来像样：

.upload-progress-container {
  width: 100%;
  height: 10px;
  background-color: #f0f0f0;
  border-radius: 5px;
  overflow: hidden;
  margin: 10px 0;
}

.upload-progress-bar {
  height: 100%;
  background-color: #007bff;
  transition: width 0.2s ease;
}

2. 在控制器/组件里监听上传进度 #

Angular的$http请求配置里有个uploadEventHandlers选项，专门用来监听上传相关事件，其中progress事件就能拿到实时的上传进度数据。修改你的请求代码如下：

首先在控制器里定义一个变量存储进度值：

// 初始进度设为0%
$scope.uploadProgress = 0;

然后修改$http.patch的配置，添加上传进度监听：

$http.patch(url, fd, {
  transformRequest: angular.identity,
  headers: {'Content-Type': undefined},
  // 关键：添加上传事件处理器
  uploadEventHandlers: {
    progress: function(event) {
      // 确保进度可计算（有些场景下total字节数可能无法获取）
      if (event.lengthComputable) {
        // 计算进度百分比：已上传字节 / 总字节 * 100
        $scope.uploadProgress = Math.round((event.loaded / event.total) * 100);
        // 注意：事件回调不在Angular的digest循环里，需要手动触发视图更新
        $scope.$apply();
      }
    }
  }
}).then(successCallback, errorCallback);

function successCallback(response){
  console.log("Success");
  console.log(response);
  // 上传完成后把进度设为100%，也可以稍后重置
  $scope.uploadProgress = 100;
  $scope.$apply();
  // 可选：几秒后重置进度条
  setTimeout(() => {
    $scope.uploadProgress = 0;
    $scope.$apply();
  }, 1500);
};

function errorCallback(error){
  console.error("上传失败：", error);
  // 上传失败可以重置进度，或者给进度条加错误样式
  $scope.uploadProgress = 0;
  $scope.$apply();
};

3. 额外优化建议 #

• 如果你用的是Angular组件（而非老版控制器），可以注入ChangeDetectorRef，用cdr.detectChanges()代替$scope.$apply()，更符合组件式开发的规范。
• 可以给进度条加状态样式，比如上传完成变绿色，失败变红色：

<div class="upload-progress-bar" 
     style="width: {{ uploadProgress }}%"
     ng-class="{'progress-success': uploadProgress === 100, 'progress-error': uploadFailed}">
</div>

对应的CSS：

.progress-success { background-color: #28a745 !important; }
.progress-error { background-color: #dc3545 !important; }

为什么不用angular-loading-bar？ #

angular-loading-bar是全局监听所有$http请求的进度，如果你只想给这一个文件上传请求做自定义进度展示，直接用$http自带的uploadEventHandlers会更灵活，能精准控制这个请求的进度状态，不会干扰其他请求的进度提示。

内容的提问来源于stack exchange，提问作者Shashishekhar Hasabnis