vue实时上传文件进度条

//上传文件组件
<el-uploadaction:show-file-list="false":before-upload="uploadFile"
><el-button type="primary" :disabled="progressFlag">上传数据</el-button>
</el-upload>
//进度条组件
<div :class="progressFlag?'progress':'progress1'"><el-progressid="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]+$/glet 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 = 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+"%)":"上传完成"}}

<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>

vue实时上传文件进度条相关推荐

java fileupload 进度_Java上传文件进度条的实现方法(附demo源码下载)
本文实例讲述了Java上传文件进度条的实现方法.分享给大家供大家参考,具体如下: 东西很简单,主要用到commons-fileupload,其中有一个progressListener的接口,该接口可以 ...
java保存图片进度条_Java上传文件进度条的实现方法(附demo源码下载)
本文实例讲述了Java上传文件进度条的实现方法.分享给大家供大家参考,具体如下: 东西很简单,主要用到commons-fileupload,其中有一个progressListener的接口,该接口可以 ...
php flash上传进度条,PHP_PHP+FLASH实现上传文件进度条相关文件下载，PHP之所以很难实现上传进度条 - phpStudy...
PHP+FLASH实现上传文件进度条相关文件下载 PHP之所以很难实现上传进度条是因为在我们上传文件到服务器的时候,要等到文件全部送到服务器之后,才执行相应的php文件.在这之前,文件数据保存在一个 ...
AngularJS PrimeNG 上传文件进度条
AngularJS PrimeNG 上传文件进度条 1.思路: 2.父页面代码实现: 3.子页面代码实现 1.思路: 使用p-progressBar,创建一个新画面,浮在p-fileUpload组件 ...
ssm上传文件进度条_Java 单文件、多文件上传 / 实现上传进度条
日常,工作在这里总结一下上传吧(是以前做过的练习,就汇总到个人博客吧) java ssm 框架实现文件上传实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传 ...
jquery和php上传文件进度条,jQuery实现文件上传进度条特效_jquery
上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下. 最近呢,一个项目做一个进度条的效果出来,这个之前 ...
ssm上传文件进度条_SSM框架+Plupload实现分块上传大文件示例
关于Plupload的介绍,相信它的官网http://www.plupload.com/已经给得很详细了.Plupload的上传原理简单点说,就是将用户选中的文件(可多个)分隔成一个个小块,依次向服务 ...
java ftp 上传文件进度条_java FTP上传文件（进度条显示进度）
java实现FTP上传有2种方式,一种是org.apache.commons.net.ftp.FTPClient这个jar包,一种是sun.net.ftp.FtpClient.不知道为什么,在使用前一 ...
ssm上传文件进度条_ssm学习笔记-三种文件上传方式
首先需要引入commons-fileupload commons-fileupload commons-fileupload 1.3.3 MultipartFile方式示例代码: @RequestM ...

vue实时上传文件进度条

vue实时上传文件进度条

vue实时上传文件进度条相关推荐

最新文章

热门文章