vue上传文件纯前端实现进度条

效果

代码

<el-progress v-if="isProgress" :percentage="percentage":color="customColorMethod"></el-progress>

axios 支持onUploadProgress

 let configs = {
   onUploadProgress: progressEvent => {
       if (progressEvent.lengthComputable) {
         _this.isProgress = true
         //是否存在进度
         var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
         console.log('进度：', percentCompleted)
         _this.percentage = percentCompleted
         if (percentCompleted == 100) {
           _this.isProgress = true
         }
         _this.$forceUpdate()
       }
     }
   }

附：el-progress整体封装

<template>
  <div class="bg">
    <el-progress :stroke-width="20" :percentage="percentage" :color="customColorMethod"></el-progress>
  </div>
</template>
<script>
export default {
  props: ['percentage'],
  data() {
    return {}
  },
  methods: {
    customColorMethod(percentage) {
      if (percentage < 30) {
        return '#909399'
      } else if (percentage < 70) {
        return '#e6a23c'
      } else {
        return '#67c23a'
      }
    }
  },
  watch: {
    percentage: function(val) {
      this.$forceUpdate()
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss"  scoped>
.bg {
  width: 100%;
  height: 100%;
  text-align: center;
  padding-top: 45vh;
  padding: 0px 20vw;
  padding-top: 45vh;
  background: rgba(239,235,235, 0.03);
  background-image: linear-gradient(-180deg, rgba(234, 237, 237, 0.3) 0%, rgba(224, 213, 213, 0.3) 100%);
  position: fixed;
  top: 0;
  left: 0;
}
</style>