文件上传显示进度条
1、所用到的UI组件

• el-dialog
• el-upload
• el-progress

2、基础用法

• 样式

<el-dialog
      title="文件上传"
      :visible.sync="excelVisible"
      width="40%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      center
    >
        <el-upload
          ref="uploadexl"
          style="text-align: center"
          :show-file-list="false"
          :on-error="handleError"
          :on-success="handleSuccess"
          :before-upload="handleBeforeUpload"
          :http-request="uploadSectionFile"
          class="upload-demo"
          drag
          action=""
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">仅限xls和xlsx文件</div>
        </el-upload>
        
      <div v-show="progressFlag">
        <el-progress
          :text-inside="true"
          :stroke-width="14"
          :percentage="progressPercent"
        ></el-progress>
      </div>
      
	<span slot="footer" class="dialog-footer">
        <el-link target="_blank" style="margin-right: 20px">
          <el-button size="mini" type="primary" @click="Getdown()"
            >下载模板</el-button
          >
        </el-link>
        <el-button size="mini" @click="excelVisibleBtn">取 消</el-button>
      </span>
      </el-dialog>

• data里的定义

 excelVisible: false,
 progressPercent: 0,
 progressFlag: false,

• 发送请求

uploadSectionFile(params) {
      const config = {
        onUploadProgress: (progressEvent) => {
          // progressEvent.loaded:已上传文件大小
          // progressEvent.total:被上传文件的总大小
          this.progressPercent = Number(
            ((progressEvent.loaded / progressEvent.total) * 90).toFixed(2)
          );
        },
      };
      this.progressFlag = true;
      let form = new FormData();
      form.append("file", params.file);
      this.axios
          .post( ``, form,config ).then((res) => {
          this.progressPercent = 100;
          
          })
}

3、百分比定义
this.progressPercent = Number( ((progressEvent.loaded / progressEvent.total) * 90).toFixed(2) );

• 为了避免出现进度条直接100%但是后端数据还未返回而造成页面卡顿，可以在请求成功后再设置进度条为100%。
• 如需让进度条显示的时间长一点，可以再成功后，使用计时器的方式进行延迟