axios上传图片或文件时显示上传进度

在平时开发中会遇到上传文件或者图片的场景，特别是在上传大文件时，稍长的等待会对用户体验造成不好的影响，所以需要做出一个有着上传进度条，这样可以大大减缓用户在等待时产生的焦虑感。

实际应用

vue-progress进度条组件

这次是通过vue-element进行开发，在element上有着进度条相关的组件，只需要传入相关的数值就能显示对应的进度：

现在有了对应的组件，接下来就可以着手处理文件上传过程中的进度了。

axios的onUploadProgress事件

在axios中有着下面的事件：

onUploadProgress和onDownloadProgress事件。由于我们要处理上传文件的进度，所以就需要onUploadProgress方法即可。其中有着progressEvent参数，其中progressEvent参数中包括了loaded（已经上传的文件大小）和total（上传文件总大小），将其进行计算，换算成整数，然后赋值给element的进度条组件，就可以显示出上传进度了

onUploadProgress: (progressEvent) => {
            let complete = parseInt(progressEvent.loaded / progressEvent.total * 100 | 0, 10);
            this.progress = complete;
          },

具体效果如下图所示：