有许多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来显示进度？
如果没有,你知道角度回购中的问题吗？
从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,否则无法测量请求.
