[JavaScript知识库]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"//是否显示进度条
      type="circle"
      :percentage="percentage"//进度条数据值
      :width="178"
      :status="percentage === 100 ? 'success' : undefined"//当进度条达到100时完成
    />
    <el-upload //上传图片组件
      v-else
      class="avatar-uploader"
      action="https://jsonplaceholder.typicode.com/posts/"
      :show-file-list="false" 
      :before-upload="beforeAvatarUpload"
      :http-request="handleUpload"
    >
      <img v-if="value" :src="value" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>


data () {
    return {
      isUploading: false,
      percentage: 0
    }
  },

最后要记住，上传完成之后要将percentage的值设为0，这样用户在更换图片时进度条才会从0开始。