vue下载文件进度,vue文件上传功能

　　这篇文章主要为大家详细介绍了某视频剪辑软件实现实时上传文件进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了某视频剪辑软件实时上传文件进度条，供大家参考，具体内容如下

　　//上传文件组件

　　埃尔-上传

　　行为

　　:show-file-list=false

　　:before-upload=uploadFile

　　El按钮类型=主要:禁用=进度标志上传数据/el-button

　　/El-上传

　　//进度条组件

　　div :class=progressFlag？进度:进度1

　　埃尔-进展

　　id=进度

　　type=circle

　　:百分比="百分比"

　　：笔画宽度=8

　　：宽度=100

　　:show-text=true

　　stroke-linecap=round

　　:format=progressFormat

　　/El-进度

　　/div

　　data() {

　　返回{

　　百分比：0,

　　progressFlag:false，

　　度数：135度，

　　状态：this.percent100？:成功,//进度条组件加上状态后不显示文字

　　颜色：[

　　{color:#fdfdfd ，百分比：99},

　　{color:#ccccc ，百分比：100},

　　]

　　}

　　}

　　方法：{

　　异步上传文件（文件){

　　//:on-progress=uploadFile 上传时会多次调用，由于是本地，间隔较大

　　设reg=/(？=\.)[a-z]$/克

　　设文件类型=文件。姓名。匹配(注册)

　　设typeArr=[xls ， xlsx ， csv]

　　如果(!typeArr.includes(文件类型)){

　　这个message.warning(上传文件格式错误!)

　　返回

　　}

　　假设表单数据=新表单数据()

　　formData.append(file ，file)

　　//realtimeUploadLocal({

　　//file:formData，

　　//uid:这个. store.state.userInfo.user.uid，

　　//})

　　this.progressFlag=true

　　等待realtimeUpload(formData，this).然后((res)={

　　if(res.code==0){

　　这个message.success(res.data)

　　}否则{

　　这个message.warning(res.data)

　　}

　　})

　　setTimeout(()={

　　this.progressFlag=false

　　//this.rotateFn(0)

　　这个百分比=0

　　},1000)

　　},

　　进度格式（百分比){

　　退货百分比100?已上传(百分比 %):上传完成

　　}

　　}

　　样式范围语言=少。进展1{显示：无；}。进度{

　　显示器：flex

　　宽度：80px

　　高度：80px

　　位置：绝对；

　　top:40px；

　　左：50%;

　　transform: translate(-50%，0)；

　　背景色：透明；

　　}

　　/风格

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

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。