如何使用 angular2 http API 跟踪上传/下载进度 [英] How to use angular2 http API for tracking upload/download progress

问题描述

在angular2中有很多支持上传/下载进度的adhoc库，我不知道如何在上传/下载时使用原生angular2 http api来显示进度.

Tho there are many adhoc libraries supporting upload/download progress in angular2, I do not know how to do use native angular2 http api to show progress while doing upload/download.

我之所以要使用原生http api是因为我要利用

The reason why I want to use native http api is because I want to utilise

1. http 拦截器(http API 包装器)围绕原生 http api 进行验证、缓存和丰富发送的实际 http 请求，例如 this &这个
2. 除了 angular 的 http api 比任何 adhoc API 都要健壮得多

有这篇不错的文章关于如何使用 angular 的 http api 进行上传/下载

There is this nice article about how to do upload/download using angular's http api

但是文章提到没有原生的方式来支持进步.

But the article mentions that there is no native way to support progress.

有没有人尝试使用 http api 来显示进度?

Did anyone try using http api for showing progress?

如果没有，您是否知道 angular repo 中的问题?

If not, do you know an issue in the angular repo for this?

推荐答案

从 Angular 4.3.x 及更高版本开始，可以使用新的 HttpClient 来自 @angular/common/http.

As of Angular 4.3.x and beyond versions, it can be achieved using the new HttpClient from @angular/common/http.

阅读收听进度事件部分.

简单的上传示例(复制自上述部分):

Simple upload example (copied from the section mentioned above):

    const req = new HttpRequest('POST', '/upload/file', file, {
      reportProgress: true,
    });

    http.request(req).subscribe(event => {
      // Via this API, you get access to the raw event stream.
      // Look for upload progress events.
      if (event.type === HttpEventType.UploadProgress) {
        // This is an upload progress event. Compute and show the % done:
        const percentDone = Math.round(100 * event.loaded / event.total);
        console.log(`File is ${percentDone}% uploaded.`);
      } else if (event instanceof HttpResponse) {
        console.log('File is completely uploaded!');
      }
    });

对于下载，它可能几乎相同:

And for downloading, it might be something like pretty much the same:

    const req = new HttpRequest('GET', '/download/file', {
      reportProgress: true,
    });

    http.request(req).subscribe(event => {
      // Via this API, you get access to the raw event stream.
      // Look for download progress events.
      if (event.type === HttpEventType.DownloadProgress) {
        // This is an download progress event. Compute and show the % done:
        const percentDone = Math.round(100 * event.loaded / event.total);
        console.log(`File is ${percentDone}% downloaded.`);
      } else if (event instanceof HttpResponse) {
        console.log('File is completely downloaded!');
      }
    });

请记住，如果您正在监视下载，则必须设置 Content-Length，否则无法测量请求.

Remember in case that you're monitoring a download, the Content-Length has to be set, otherwise, there's no way to the request to be measured.

这篇关于如何使用 angular2 http API 跟踪上传/下载进度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！