Question

首先 - 在Angular 2发布之前就提出了一个类似的问题，答案基本上没有。建议使用一些奇怪的解决方法，但是当我尝试它们时它们不起作用。我希望此功能已添加到发布中

我正在用打字稿中的Angular 2编写一个Web应用程序，我希望在显示进度时上传一个或多个图像。这很简单，可以使用原始XmlHttpRequest，但我认为可以使用Angular 2 HTTP包装器。 Angular2 HTTP的文档说它使用XmlHttpRequest作为后端，所以也许有办法访问原始请求？

Answer 1

Angular＆gt; = 4.3

https://angular.io/guide/http

倾听进展事件

有时，应用程序需要传输大量数据，而这些传输可能需要一些时间。提供有关此类转移进度的反馈是一种很好的用户体验实践;例如，上传文件 - 和@ angular / common / http支持此功能。

要发出启用了进度事件的请求，请首先使用特殊的reportProgress选项设置HttpRequest实例：

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

此选项可以跟踪进度事件。请记住，每个进度事件都会触发更改检测，因此只有在您打算在每个事件上实际更新UI时才启用它们。

接下来，通过HttpClient的request（）方法发出请求。结果将是一个Observable事件，就像拦截器一样：

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!');
  }
});

Angular 2.1 HTTP客户端支持onProgress

1 个答案: