vue实现实时上传文件进度条 vue实现实时上传文件进度条

本文实例为大家分享了vue实时上传文件进度条，供大家参考，具体内容如下
【vue实现实时上传文件进度条】
文章图片

//上传文件组件上传数据//进度条组件

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]+$/glet fileType = file.name.match(reg)+""let typeArr = ["xls","xlsx","csv"]if(!typeArr.includes(fileType)){this.$message.warning("上传文件格式错误!")return }let formData = https://www.it610.com/article/new FormData()formData.append('file',file)// realtimeUploadLocal({//file:formData,//uid:this.$store.state.userInfo.user.uid,// })this.progressFlag = trueawait 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+"%)":"上传完成" }}

.progress1{ display:none; }.progress{display: flex; width: 80px; height: 80px; position: absolute; top: 40px; left: 50%; transform: translate(-50%, 0); background-color: transparent; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。