vue+ElementUI的导入组件的应用（带进度条）

HTML部分代码：

<el-upload
       class="upload-demo"
       :action="fileAction"
       accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
       :show-file-list="false" :before-upload="beforeAvatarUpload" :on-progress="uploadProcess"
           :on-success="importSuccess" :on-error="importError">
       <el-button size="small" type="primary">文件导入</el-button>
     </el-upload>

JS部分代码：

<script>

export default {
    data () {
      return {

        paramId: "",
        loadProgress: 0, // 动态显示进度条
        progressFlag: false, // 关闭进度条

        fileAction: "",
        dataList: [],  //列表数据
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,

        customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ]

      }
    },

methods: {
    init (id) {
         this.paramId = id; 

//上传的接口
         this.fileAction = this.$http.adornUrl(this.apiUrl.cinaImport+"?taskId="+this.paramId);
         this.loadProgress = 0; // 动态显示进度条
       this.progressFlag = false; // 关闭进度条
       this.dataList = [];  //列表数据
         this.pageIndex = 1;
         this.pageSize = 10;
         this.totalPage = 0;
         this.$nextTick(() => {
          this.getDataList();
         })
    },

//获取导入的数据列表
     getDataList(){
     },
     // 每页数
     sizeChangeHandle (val) {
         this.pageSize = val
         this.pageIndex = 1
         this.getDataList()
     },
     // 当前页
     currentChangeHandle (val) {
         this.pageIndex = val
         this.getDataList();
     },
      beforeAvatarUpload(file) {
     },
     //导入
     uploadProcess(event, file, fileList) {
       this.progressFlag = true; // 显示进度条
       this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
       if (this.loadProgress >= 100) {
           this.loadProgress = 100
           setTimeout( () => {this.progressFlag = false}, 1000) // 一秒后关闭进度条
       }
     },
     //导入成功
     importSuccess(res) {
        if(res.code === 200){
         this.$message({
            message: '导入成功',
            type: "success",
            duration: 1500,
            onClose: () => {
             this.getDataList();
            }
         });
        }else{
         this.$message({
      showClose: true,
      message: res.msg,
      type: 'error'
     });
        }
     },
     //导入失败
     importError(err) {
        this.$message({
     showClose: true,
     message: "导入失败",
     type: 'error'
    });
     }
   
    }
  }
</script>