vue element-ui,上傳文件加載進度條顯示效果(使用定時器實現源碼分享）

上傳文件效果如圖：

父組件相關代碼

html

 <drag-upload
            ref='mychild'
            action="//接口相關地址" 
            v-model="versionwareList"
            @submitUploadParent='formSubmit'
            @input='delUpload'
            :autoUpload="autoUpload"
            :visible="visible"
            :disabled="disabled"
          />

js

 handleSubmit() {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            this.submitLoading = true;
            this.disabled = true;
            //數據校驗成功，上傳文件
            this.$refs.mychild.submitUpload();
            // this.submitLoading = false;
          } else {
            this.$message.error('請按照正確格式填寫');
          }
        });
      },

 

 

 

子組件代碼

 

<template>
  <!-- 文件拖拽上傳 -->
  <div>
    <el-upload
      class="drag-upload"
      :action="action"//接口地址
      :name="name"//上傳的文件字段名
      :data="otherParams"//上傳時附帶的額外參數
      :visible="visible"//根據父組件傳值
      ref="upload"
      drag//是否啟用拖拽上傳
      :headers='xHeaders'//設置上傳的請求頭部
      :limit="limit"//最大允許上傳個數
      :file-list="value"//上傳的文件列表
      :auto-upload="autoUploadVal"//是否自動上傳文件
      :before-upload="beforeUpload"//上傳文件之前的鈎子
      :before-remove="beforeRemove"//刪除文件之前的鈎子
      :on-success="handleSuccess"//文件上傳成功時的鈎子
      :on-progress="onProgress"//文件上傳時的鈎子，進度條加載
      :on-remove="handleRemove"//文件列表移除文件時的鈎子
      :on-preview="handlePreview"//點擊文件列表中已上傳的文件時的鈎子
      :disabled="disabled"//是否禁用
　　　　>
      <el-progress type="circle" v-if="loading" :percentage="percentage" :color="colors" class="progress"></el-progress>
      <i class="drag-upload__icon" :class="loading ? '' : 'el-icon-upload' "></i>
      <p class="drag-upload__text" v-show="!loading">點擊或直接將文件拖到此處上傳</p>
      <p class="drag-upload__tip" v-show="!loading">文件大小不能超過{{sizeLimit}}MB！{{tip}},只允許上傳{{limit}}個文件</p>
    </el-upload>
  </div>

</template>

<script>
  import axios from 'axios';
  import Vue from 'vue';
  export default {
    props: {
      // 文件列表
      value: {
        type: Array,
        default () {
          return [];
        }
      },
      autoUpload:{
        type: String,
        default: 0
      },
      //文件個數
      limit:{
        type: Number,
        default:1,
      },
      //上傳地址
      action: {
        required: true,
        type: String,
        default: '',
      },
      // 對應inpu控件的name屬性，后端依據這個字段獲取文件。
      name: {
        type: String,
        default: 'file'
      },
      disabled:{
        type: Boolean,
        default: false
      },
      // 文件的大小限制,單位為MB
      sizeLimit: {
        type: Number,
        default: 1000
      },
      // 提示信息
      tip: {
        type: String,
        default: ''
      },
      visible: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      visible(value) {
        if (value) {
        }else{
          clearInterval(this.interval);
          this.loading = false;
        }
      }
    },
    data() {
      return {
        loading: false,
        otherParams:{
          //根據自己接口要求設置
        },
        xHeaders:{
          //根據自己接口要求設置
        },
        autoUploadVal:this.autoUpload=='1'?true:false,
        isChangeFlag:false,
        percentage:0,//加載進度條初始值
        colors:[
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
        interval:0,//加載的定時器
        timeStop:0,//加載成功停止的定時器
      }
    },
    methods: {
       submitUpload() {
        let uoloadFilesData = this.$refs.upload.uploadFiles
        if(uoloadFilesData.length == 0){
          let res={
            data:''
          }
          this.$emit('submitUploadParent',res);
        }else{
          if(uoloadFilesData[0].status === 'success'){
            uoloadFilesData[0].data = uoloadFilesData[0].name
            this.$emit('submitUploadParent',uoloadFilesData[0]);
          }else{
            this.$refs.upload.submit();
          }
        }
      },
      abort(){
        this.$refs.upload.abort();
      },
      //進度條
      onProgress(e, file, v) {
        let that = this;
        let endPro = 95;
        that.loading = true;
        that.interval = setInterval(function () {
          if (that.percentage < endPro) {
            that.percentage++;
          }
        },500)
      },
      beforeUpload(file) {
        const limit = file.size / 1024 / 1024 < this.sizeLimit;
        if (!limit) {
          this.$message.error(`上傳的文件小不能超過 ${this.sizeLimit}MB!`);
        }
        if (limit) {
          this.loading = true;
        }
        return limit;
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`確定刪除“${ file.name }”？`);
      },
      handleSuccess(res, file, fileList) {
        //上傳成功，給個加載100的效果
        let that = this;
        that.percentage = 100;
        clearInterval(that.interval)
        that.timeStop=setTimeout(() => {
          that.loading = false;
          that.percentage=0;
          clearTimeout(that.timeStop)
          //根據實際開發情況處理響應
          if (true) {
            //文件上傳成功，返回狀態數據
            that.$emit('submitUploadParent',res);
          } else {
            that.$message.error(res.message || '上傳失敗');
          }
        }, 100);
      },
      handleRemove(file, fileList) {
        //刪除列表選項，需要停止定時器及相關參數
        clearInterval(this.interval)
        this.percentage = 0;
        this.loading = false;
        this.$emit('input', fileList);
      },
      handlePreview(file) {
        window.open(file.url);
      }
    },
  }
</script>

<style lang="scss" scoped>
  .drag-upload {
    .drag-upload__icon {
      font-size: 40px;
      line-height: 40px;
      color: var(--theme);
      margin: 0;
    }

    .drag-upload__text {
      line-height: 20px;
      margin-bottom: 6px;
    }

    .drag-upload__tip {
      font-size: 12px;
      line-height: 20px;
      color: $auxiliary-text-color;
    }
  }
</style>

<style lang="scss">
  .drag-upload {
    .el-upload {
      width: 100%;
    }
    .el-upload-dragger {
      width: 100%;
      min-height: 140px;
      height: 100%;
      padding: 20px 1em;
    }
    .el-progress{
      display: none;
    }
    .progress.el-progress{
      display: inline-block;
    }
  }
</style>