如何在Angular中使用HttpClient的reportProgress功能？

Question

我正在使用HTTP POST方法下载文件。我想调用另一个方法来向最终用户显示下载进度，直到文件下载完成。如何在HttpClient中使用reportProgress实现此目的。

  downfile(file: any): Observable<any> {

    return this.http.post(this.url , app, {
      responseType: "blob", reportProgress: true, headers: new HttpHeaders(
        { 'Content-Type': 'application/json' },
      )
    });
  }

- user10274935

Answer 1

您需要使用reportProgress: true来显示任何HTTP请求的进度。如果您想查看所有事件，包括传输进度，您还需要使用observe: 'events'选项，并返回类型为HttpEvent的Observable。然后，您可以在组件方法中捕获所有事件（DownloadProgress、Response等）。 在 Angular官方文档 中了解更多细节。

  downfile(file: any): Observable<HttpEvent<any>>{

    return this.http.post(this.url , app, {
      responseType: "blob", reportProgress: true, observe: "events", headers: new HttpHeaders(
        { 'Content-Type': 'application/json' },
      )
    });
  }

然后在组件中，您可以如下捕获所有的事件。

this.myService.downfile(file)
    .subscribe(event => {

        if (event.type === HttpEventType.DownloadProgress) {
            console.log("download progress");
        }
        if (event.type === HttpEventType.Response) {
            console.log("donwload completed");
        }
});

在此处查找HttpEventTypes。

- Sudarshana Dayananda

---

如何为文件的每个部分配置字节数量？ - Sérgio S. Filho

@Sérgio S. Filho，我不明白你在问什么。 - Sudarshana Dayananda

你好！为了将文件分段发送到服务器，客户端应用程序会将文件拆分成一些较小的字节量。我正在寻找如何配置每个这些小包字节的大小。我认为这可以增加或减少可视化反馈百分比精度，并可能有助于显示更平滑的加载反馈。 - Sérgio S. Filho

服务器/后端需要以某种特定的方式进行配置吗？比如，返回一个流或者报告进度？ - Jnr

@Jnr 这个更改不会对后端产生任何依赖。 - Sudarshana Dayananda

Answer 2

您需要在AppModule中添加HttpClientModule。

首先，您需要通过创建HttpRequest类的实例并使用reportProgress选项来构建请求对象。

更多信息，请参见： https://alligator.io/angular/httpclient-intro/

- Shilpa Soni