el-upload上传过程中加进度条，进度条el-progress配合fake-progress一起使用，效果如下：

 安装

npm install fake-progress

在用到的文件里面引用

import Fakeprogress from "fake-progress";

 这个进度条主要是假的进度条，他开始加载后一直不会加载到100%，只有在结束的时候才会到100%

<el-progress type="circle" :percentage="parseInt(fake.progress * 100)"></el-progress>

 fake: new Fakeprogress({

        timeConstant: 10000,

        // autoStart: true,

}),

进度条开始：this.fake.start();

进度条结束：this.fake.end();

 完整代码

<template><div><el-uploadref="upload"v-model="file"class="upload-import"action="":accept="jpg,png,text":auto-upload="true":show-file-list="FileList":http-request="handleUpload":before-upload="beforeUpload":on-change="handleChange":on-exceed="handleExceed":before-remove="beforeRemove"dragmultiple:disabled="uploadLoading"></el-upload><div class="upload-loading-mask" v-if="uploadLoading"><el-progresstype="circle":percentage="parseInt(fake.progress * 100)"></el-progress></div></div>
</template><script>
export default {data() {return {uploadLoading: false,file: "",fileList: [],fake: new Fakeprogress({timeConstant: 10000,// autoStart: true,}),fileCount:0,fileTotal:0};},mounted() {},methods: {async handleUpload(file) {this.fake.progress = 0;if (file.file.size === 0) {this.$message.error(`不能上传空文件`);return;}this.uploadLoading = true;this.fake.start();await Api.uploadFiles(params).then(res) => {if (res) {this.fileCount++;if (this.fileCount === this.fileTotal) {this.fileCount = 0;this.fake.end(); //结束进度条this.uploadLoading = false;}} else {this.fake.end();this.uploadLoading = false;return;}}).catch((err) => {this.fake.end();this.fake.progress = 0;this.uploadLoading = false;console.log(err);});},beforeUpload(file) {},handleChange(filelist) {this.fileTotal = filelist.length;},beforeRemove(){}}
};
</script>