Angular 5中如何获取文件上传的HttpEvent进度？

我明白你查了官方文档和Stack Overflow还是没搞定Angular 5上传文件时的进度展示问题，其实核心是要利用Angular HttpClient的事件监听能力，而不是只订阅成功/失败回调。我给你一步步拆解实现方案：

首先要在上传请求里开启进度报告，并指定监听所有HTTP事件，而不是只返回响应体。修改uploadtool5方法：

import { HttpClient, HttpRequest, HttpEvent } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class FileService {
  constructor(private http: HttpClient) {}

  uploadtool5(formData: FormData, token: string) {
    // 构造带进度监听的请求
    const req = new HttpRequest(
      'POST',
      '你的NodeJS接口地址', // 替换成实际的后端接口URL
      formData,
      {
        reportProgress: true, // 开启进度报告
        observe: 'events', // 监听所有HTTP事件
        headers: {
          'Authorization': `Bearer ${token}` // 携带token，根据你的后端要求调整
        }
      }
    );

    // 返回事件流，而不是直接返回响应
    return this.http.request(req);
  }
}

注意：不要手动设置Content-Type为multipart/form-data，因为当你传入FormData时，Angular会自动帮你设置正确的Content-Type（包括boundary），手动设置反而会导致后端解析失败。

现在在组件里订阅这个请求，区分不同的事件类型来处理进度和完成/失败状态：

import { Component } from '@angular/core';
import { FileService } from './file.service';
import { HttpEvent, HttpEventType } from '@angular/common/http';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html'
})
export class FileUploadComponent {
  uploadProgress = 0;
  isUploading = false;
  token = '你的token值'; // 替换成实际的token

  constructor(private fileService: FileService) {}

  uploadFile() {
    // 构造你的FormData（和你原来的body一致）
    const body = new FormData();
    body.append('file', 你的文件对象); // 替换成实际的File对象
    body.append('otherField', '其他字段值'); // 你的其他表单字段

    this.isUploading = true;
    this.uploadProgress = 0;

    this.fileService.uploadtool5(body, this.token).subscribe(
      (event: HttpEvent<any>) => {
        switch (event.type) {
          case HttpEventType.UploadProgress:
            // 计算上传进度百分比
            this.uploadProgress = Math.round((100 * event.loaded) / event.total);
            console.log(`上传进度：${this.uploadProgress}%`);
            break;
          case HttpEventType.Response:
            // 上传完成，处理后端响应
            this.isUploading = false;
            if (event.body.success) {
              // 这里执行你的成功操作，比如提示用户上传完成
              console.log('文件上传成功！');
            } else {
              console.log('后端返回上传失败');
            }
            break;
        }
      },
      (err) => {
        // 处理上传错误
        this.isUploading = false;
        console.error('上传出错：', err);
        // 这里可以给用户提示错误信息
      }
    );
  }
}

最后在组件的HTML模板里添加进度展示，比如用原生进度条或者UI组件库的进度组件：

<!-- 原生进度条示例 -->
<div *ngIf="isUploading">
  <progress value="{{uploadProgress}}" max="100"></progress>
  <p>当前上传进度：{{uploadProgress}}%</p>
</div>

<button (click)="uploadFile()" [disabled]="isUploading">
  {{isUploading ? '上传中...' : '开始上传'}}
</button>

• reportProgress: true：告诉Angular HttpClient跟踪上传/下载的进度事件。
• observe: 'events'：让请求返回的是HttpEvent流，而不是直接返回响应体，这样我们能捕获到进度事件、响应事件等。
• HttpEventType.UploadProgress：这个事件类型会在上传过程中持续触发，包含loaded（已上传字节数）和total（总字节数）两个属性，用来计算进度。

这样改造后，你就能实时获取上传进度并展示给用户了。如果你的NodeJS后端有特殊的响应格式，只需要调整组件里处理HttpEventType.Response的部分即可。

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