最终样式:
因为只提了要显示文件上传的真实进度,所以就用了最基础的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;
}