//上传文件组件
<el-upload
? ? ? ? action
? ? ? ? :show-file-list="false"
? ? ? ? :before-upload="uploadfile"
>
? ? ? <el-button type="primary" :disabled="progressflag">上传数据</el-button>
</el-upload>
//进度条组件
<div :class="progressflag?'progress':'progress1'">
? ? ? ? <el-progress
? ? ? ? ? ? ? ? id="progress"
? ? ? ? ? ? ? ? ?type="circle"
? ? ? ? ? ? ? ? ?:percentage="percent"
? ? ? ? ? ? ? ? ?:stroke-width="8"
? ? ? ? ? ? ? ? ? :width="100"
? ? ? ? ? ? ? ? ? :show-text="true"
? ? ? ? ? ? ? ? ? stroke-linecap="round"
? ? ? ? ? ? ? ? ? :format="progressformat"
? ? ? ? ></el-progress>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
</div>

data() {
?? ?return {
?? ??? ?percent:0,
?? ??? ?progressflag:false,
?? ??? ?deg:135,
?? ??? ?status:this.percent<100?"":"success",//进度条组件加上状态后不显示文字
?? ??? ?color:[
?? ??? ??? ?{color:"#fdfdfd",percentage:99},
?? ??? ??? ?{color:"#ccccc",percentage:100},
?? ??? ?]
?? ?}
}

methods:{

async uploadfile(file){
? ? ? ? //:on-progress="uploadfile"上传时会多次调用，由于是本地，间隔较大
? ? ? ? let reg = /(?<=\.)[a-z]+$/g
? ? ? ? let filetype = file.name.match(reg)+""
? ? ? ? let typearr = ["xls","xlsx","csv"]
? ? ? ? if(!typearr.includes(filetype)){
? ? ? ? ? ? this.$message.warning("上传文件格式错误!")
? ? ? ? ? ? return?
? ? ? ? }
? ? ? ? let formdata = new formdata()
? ? ? ? formdata.append('file',file)
? ? ? ? // realtimeuploadlocal({
? ? ? ? // ? ? file:formdata,
? ? ? ? // ? ? uid:this.$store.state.userinfo.user.uid,
? ? ? ? // })
? ? ? ? this.progressflag = true
? ? ? ? await realtimeupload(formdata,this).then((res)=>{
? ? ? ? ? ? if(res.code == "0"){
? ? ? ? ? ? ? ? this.$message.success(res.data)
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? this.$message.warning(res.data)
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? settimeout(()=>{
? ? ? ? ? ? this.progressflag = false
? ? ? ? ? ? // this.rotatefn(0)
? ? ? ? ? ? this.percent = 0
? ? ? ? },1000)
? ? },

progressformat(percentage){
? ? ? ? return percentage<100?"已上传("+percentage+"%)":"上传完成"
?}

}

<style scoped lang="less">
.progress1{ display:none;}
.progress{
? ? ? ? display: flex;
? ? ? ? width: 80px;
? ? ? ? height: 80px;
? ? ? ? position: absolute;
? ? ? ? top: 40px;
? ? ? ? left: 50%;
? ? ? ? transform: translate(-50%, 0);
? ? ? ? background-color: transparent;
}

</style>