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

有许多adhoc库支持angular2的上传/下载进度,我不知道如何使用native angular2 http api在上传/下载时显示进度.

我想使用原生http api的原因是因为我想利用它

>本地http api周围的http拦截器(http API包装器),验证,缓存和放大器丰富发送的实际http请求,例如this& this
>除了angular之外,http api比任何adhoc API都强大得多

关于如何使用angular的http api进行上传/下载有this nice article

但该文章提到,没有本土方式来支持进步.

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

如果没有,你知道角度回购中的问题吗?

@H_502_15@
从Angular 4.3.x及更高版本开始,可以使用@ angular / common / http中的新 HttpClient实现.

阅读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,否则无法测量请求.

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...