Angular 5文件上传：HttpRequest与reportProgress无法正常工作

我之前封装HTTP服务时也碰到过一模一样的问题，大概率是你在封装request方法时没处理好两个关键配置——reportProgress和observe。下面给你一步步拆解修复：

核心原因 #

默认情况下，Angular HttpClient的请求observe选项是'body'，只会返回最终的响应体，不会触发任何进度事件。要获取上传进度，必须同时满足两个条件：

1. 在HttpRequest中开启reportProgress: true
2. 将请求的observe选项设为'events'

1. 完善你的封装request方法 #

因为所有请求都走这个统一入口，所以要确保它能正确保留或处理进度相关的配置。注意HttpRequest是不可变对象，修改配置需要用clone()方法：

import { HttpClient, HttpRequest, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

export class HttpWrapperService {
  constructor(private http: HttpClient) {}

  public request(request: HttpRequest<any>, options?: any): Observable<HttpEvent<any>> {
    // 合并传入的配置，克隆request避免修改原对象
    const finalRequest = options ? request.clone(options) : request;

    // 关键：如果开启了进度报告但没设置observe为events，自动修正
    let adjustedRequest = finalRequest;
    if (finalRequest.reportProgress && finalRequest.observe !== 'events') {
      adjustedRequest = finalRequest.clone({ observe: 'events' });
    }

    return this.http.request(adjustedRequest);
  }
}

2. 调用上传接口的正确姿势 #

在上传文件的组件中，明确设置reportProgress和observe，然后订阅事件获取进度：

import { HttpEventType, HttpRequest } from '@angular/common/http';

export class FileUploadComponent {
  constructor(private httpWrapper: HttpWrapperService) {}

  uploadFile(file: File): void {
    const formData = new FormData();
    formData.append('file', file);

    // 创建上传请求时，必须开启进度报告并设置observe为events
    const uploadRequest = new HttpRequest('POST', '/api/upload', formData, {
      reportProgress: true,
      observe: 'events'
    });

    this.httpWrapper.request(uploadRequest).subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        // 计算并展示上传进度
        const percentDone = Math.round(100 * event.loaded / event.total);
        console.log(`当前上传进度：${percentDone}%`);
        // 这里可以把进度绑定到UI组件，比如进度条
      } else if (event.type === HttpEventType.Response) {
        console.log('上传完成！', event.body);
        // 处理上传成功后的业务逻辑
      }
    });
  }
}

3. 额外排查点 #

• 确保你的Angular 5是最新小版本（比如5.2.11），避免早期HttpClient的已知bug
• 后端要支持分块传输（大部分现代框架默认都支持，自定义后端需要确认）
• 不要在封装方法中对请求体做额外转换，否则可能导致进度计算异常

这样调整后，应该就能正常获取上传进度反馈了～

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