XHR 文件上传进度条原理解析

前言

前几天再写自己的一个后台模板。有个功能是实现上传进度条。

那么ojk了，上网上找下上传进度条的实现。

(这个截图是我已经写的好的)

此刻我突然想到了为啥我不看看ng-zorro 得代码怎么写的，他肯定写的有上传进度条得功能……

在 github.com/NG-ZORRO/ng… 第248行处发现了这个……

    return this.http.request(req).subscribe((event: HttpEvent<{}>) => {
      if (event.type === HttpEventType.UploadProgress) {
        if (event.total > 0) {
          // tslint:disable-next-line:no-any
          (event as any).percent = event.loaded / event.total * 100