前端上传文件如何添加进度条

项目进入测试阶段，领导说：我上传一个几十兆的文件，你loading半天体验不好，让我加个上传进度条。

领导说的自然要尽量完成。

于是，我就想我拿到文件大小，给个定时器再结合antd的progress组件，一定时间内给他一个多大的值去计算上传到多少，然后在还没有请求完成的时候给他卡死，最后请求成功的时候再给设置到100%。

当我准备coding的时候，还是习惯性百度一下看看别人是怎么去实现的。

然后发现，在axios请求中有个参数onUploadProgress函数，它有一个上传进度的事件参数

然后可以通过回调函数的方式在页面进行上传进度判断显示。

const progressCallBack = (e) => { // 文件上传进度
    if (e.lengthComputable) {
      const rate = e.loaded / e.total
      if (rate < 1) { // 最后请求完成的时候设置到1
        setUploadProgressPercent(Number((rate * 100).toFixed(2)))
      }
    }
  }

lengthComputable：只读属性是一个布尔值，表示[ProgressEvent]所关联的资源是否具有可以计算的长度

在计算进度的时候，他直接到1时就展示100%；而是会在请求完成的时候设置100%。