//上傳文件組件
<el-upload
? ? ? ? action
? ? ? ? :show-file-list="false"
? ? ? ? :before-upload="uploadFile"
>
? ? ? <el-button type="primary" :disabled="progressFlag">上傳數(shù)據(jù)</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",//進度條組件加上狀態(tài)后不顯示文字
?? ??? ?color:[
?? ??? ??? ?{color:"#fdfdfd",percentage:99},
?? ??? ??? ?{color:"#ccccc",percentage:100},
?? ??? ?]
?? ?}
}

methods:{

async uploadFile(file){
? ? ? ? //:on-progress="uploadFile"上傳時會多次調(diào)用，由于是本地，間隔較大
? ? ? ? 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>