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]+$/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+"%)":"上传完成"
 }

}

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