如何使用angular2 http API跟踪上传/下载进度

阅读Listening to progress events部分.

简单的上传示例(从上面提到的部分复制)：

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

而对于下载,它可能是几乎相同的东西：

const req = new HttpRequest('GET','/download/file',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,否则无法测量请求.