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

最终样式:

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

  导入数据脚本

其中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;
}