vue实现图片上传或加载时显示进度条

大家在写项目时肯定会遇到这样的一个需求，在上传文件或者头像过程中用进度条去代替图片上传的过程，这要做的好处是
1、上传大的资源时让用户知道资源正在被上传，而不是点击上传以为卡住了没反应而多次点击上传，导致一下子上传多个文件。
2、对文件上传做一个性能缓冲的效果，让用户能够看到文件的上传进度从而愿意去等待文件的上传。

今天我就用element ui 跟 vue去实现一个图片上传时显示进度条的效果。
在HTML5中新增了一个标签progress表示进度，而axios中对progress进行了封装。

//封装了一个上传图片的接口方法
export const uploadCourseImage = (data, onUploadProgress) => {
  return request({
    method: 'POST',
    url: '',
    data,
    onUploadProgress
  })
}

//在vue.js中调用,通过onUploadProgress方法事件对象中的total与loaed可以获取数据上传的完整大小和正在上传的大小
const { data } = await uploadCourseImage(fd, e => {
          this.percentage = Math.floor(e.loaded / e.total * 100)
})

然后我们使用element ui构建页面结构，通过绑定isUploading与percentage来控制进度条是否显示以及进度条中的数值

<template>
  <div class="course-image">
    <el-progress //进度条组件
      v-if="isUploading"//是否显示进度条
      typ