angular文件上传进度显示

在本周,潘老师要求对文件上传功能进行一下修改,要求弹出一个弹窗并显示上传进度,开始的时候想着还觉得这是个挺高级的功能,现在才发现前人又一次帮我们铺好了路。

通用实现

标题是angular,但先介绍的方法却和angular无关,而是一个在js中都可以通用的方法——XMLHttpRequest

XMLHttpRequest

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是_开发者的梦想_,因为您能够:

  • 在不重新加载页面的情况下更新网页
  • 在页面已加载后从服务器请求数据
  • 在页面已加载后从服务器接收数据
  • 在后台向服务器发送数据

所有现代的浏览器都支持 XMLHttpRequest 对象。

关于它的详细内容可以查看这篇文档,这里就不在细说了。

XMLHttpREquest.upload.onprogress

回到正题,要实现文件上传进度很简单,upload.onprogress事件回调方法可用于跟踪资源上传的进度,它的event参数对象包含两个重要的属性loaded和total。分别代表当前已上传的字节数(number of bytes)和文件的总字节数。既然知道了这两个属性,上传进度,上传速度等等不就都可以算出来了:

      // 增加上传过程事件
      xhr.upload.addEventListener('progress', (e: ProgressEvent) => {
      // lengthComputable属性代表文件总大小是否可知。如果 lengthComputable 属性的值是 false,那么意味着总字节数是未知并且 total 的值为零。
        if (e.lengthComputable) {
        // 上传的百分比
          const percentage = Math.round((e.loaded * 100) / e.total);
          // 耗费的时间 , time 是开始的时间
          const diff = new Date().getTime() - time;
          // 上传的速度
          speed = Math.round(e.loaded / diff * 1000);
          // 剩余时间
          eta = Math.ceil((e.total - e.loaded) / speed);
        }
      }, false);

注意事项

1.若是再浏览器的控制台中 new 一个XHR对象,并使用点运算符,可以发现有一个onprogress事件监听器


虽然,这看着和我们用到的差不多,但这可不是我们需要的,

后者是用于加载资源时,而前者用于资源上传时

2.测试的时候最好网速慢一点,或者文件大一些,否着可能会出现看不出效果,一来就是百分百,因为xhr.upload.onprogress在上传阶段(即xhr.send()之后,xhr.readystate=2之前)触发,每50ms触发一次。

ps: 网速可以通过控制台设置

angular实现

后来才发现angular已经给我们封装,整体上都是差不多的

upload(file: File) {  
  if (!file) {  
  return;  
 }  
 
  // 创造请求对象  
  // reportProgress 告诉 HttpClient 监听并返回XHR progress events事件. 
  const req = new HttpRequest('POST', '/upload/file', file, {  
  reportProgress: true  
  });  
  
  // 产生一个 event 流  
  return this.http.request(req).subscribe((event: HttpEvent<{}>) => {  
  if (event.type === HttpEventType.UploadProgress) {  
   if (event.total > 0) {  
  // 计算上传的百分比  
  const percent = event.loaded / event.total * 100;  
 } }  });

HttpEventType 是不同种类的 HttpEvent 的枚举类型(官方解释)

这是anular的官方demo可以参考。

作者:笙歌会停

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值