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

最新推荐文章于 2023-09-03 12:58:38 发布

转载

最新推荐文章于 2023-09-03 12:58:38 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c4d91dce51d452ec621c8a4

文章标签：

#javascript #c# #ViewUI

博客探讨了如何实现文件上传进度条，通过分析Angular、jQuery及原生JS的实现方式，重点介绍了XHR的`upload.onprogress`事件，用于监听上传进度，并提供了Vue中使用原生JS和axios实现上传进度的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

那么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;
        }
        args.onProgress(ev