乘风原创程序

  • vue实现实时上传文件进度条
  • 2022/3/30 14:48:57
  • 本文实例为大家分享了vue实时上传文件进度条,供大家参考,具体内容如下

    //上传文件组件
    <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>