Angular文件上传进度百分比

前端之家收集整理的这篇文章主要介绍了Angular文件上传进度百分比前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在我在Angular 4中开发的应用程序中,用户可以将多部分文件上传到服务器.文件很大.我需要显示文件上传过程的当前进度及其对用户的百分比,我该怎么办?

提前致谢!

由于您使用的是Angular4,因此可以使用@ angular / common / http中的新HttpClient使用 Listening to progress事件来实现.

从文档中添加代码,

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

编辑
由于OP希望将它与angular2一起使用,因此应该使用本机JavaScript XHR包装为此answer中提到的Observable

猜你在找的Angularjs相关文章