el-upload上传文件展示文件上传进度

最终样式:

因为只提了要显示文件上传的真实进度,所以就用了最基础的e-progress环形进度条,具体代码如下:

<el-upload
  class="upload-demo"
  ref="upload"
  accept=".csv"
  :action="httpUrl"
  :headers="headers"
  :show-file-list="false"
  :file-list="fileList"
  :data="{ id: scope.row.id }"
  :limit="1"
  :on-progress="onProgress"
  :before-upload="beforeUpload"
   :on-success="handleSuccess"
>
  <el-button type="text" size="small">导入数据脚本</el-button>
</el-upload>

<!-- 加载进度条的样式 -->
    <div v-if="isShowJinDuTiao" class="bacc">
      <div class="jindutiao">
        <el-progress type="circle" :percentage="curPercentage" :width="80" 
             class="progressCircle"></el-progress>
      </div>
    </div>

其中isShowJinDuTiao是控制进度条所在div是否展示

// 文件上传前的钩子函数,这个时候已经选完文件了
    beforeUpload(file) {
      // 选完上传的文件,开启进度条
      this.isShowJinDuTiao = true;
    },

// 文件上传时的钩子函数,获取上传进度
    onProgress(event, file, fileList) {
      let num = ((event.loaded / event.total) * 100) | 0; //百分比
      this.curPercentage = num;
      if (this.curPercentage == 100) {
        当文件上传完成后,关闭进度条
        this.isShowJinDuTiao = false;
        this.curPercentage=0;
      }
    },

/* 进度条样式 */
.bacc {
/*bacc是灰色的大背景*/
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.6);
  /*这个类的作用是把进度条放到水平垂直居中的位置*/
  .jindutiao {
    position: absolute;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    margin-left: -75px;
    margin-top: -75px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
/*更改默认的文字样式*/
.progressCircle ::v-deep .el-progress__text {
  color: #fff;
}