vue上传文件显示进度条,当上传完成后间隔一秒进度条消失
<template>
<el-upload
class="avatar-uploader"
action="api/file/upload"
:show-file-list="false"
:before-upload="beforeAvatarUpload"
:on-progress="handleUploadProgress"
:on-success="handleAvatarSuccess"
ref="upload"
>
<el-button slot="trigger">Upload File</el-button>
<div v-if="uploadProgress > 0">
<el-progress :percentage="uploadProgress"></el-progress>
</div>
</el-upload>
</template> <script>
export default {
data() {
return {
uploadProgress: 0,
};
},
methods: {
beforeAvatarUpload(file) {
// do some validation on the file
},
handleUploadProgress(event, file, fileList) {
this.uploadProgress = event.percent;
},
handleAvatarSuccess(response, file, fileList) {
this.uploadProgress = 100;
setTimeout(() => {
this.uploadProgress = 0;
}, 1000);
},
},
};
</script>
vue上传文件显示进度条,当上传完成后间隔一秒进度条消失的更多相关文章
- ajax上传文件显示进度
下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...
- Linux学习23-Xftp上传文件显示乱码问题
前言 当我们在windows新建一个文件,里面有中文时,使用Xftp上传到linux服务器上,会出现乱码问题. Windows的默认编码为GBK Linux的默认编码为UTF-8 Xftp上传文件乱码 ...
- 一般处理程序上传文件(html表单上传、aspx页面上传)
html 表单上传文件 一般处理程序由于没有 apsx 页面的整个模型和控件的创建周期,而比较有效率.这里写一个用 html 表单进行文件上传的示例. 1. 表单元素选用 ...
- 在使用 AjaxFileUpload 上传文件时,在项目发布到 iis 后,图片不能预览
在使用 AjaxFileUpload 上传文件时,图片已经上传成功了,在站点没有发布时,可以预览,可是在项目发布到 iis 后,图片就不能预览,在网上找了很多的方案也没解决,最后的解决方案如下: 1 ...
- axios+Vue上传文件显示进度
一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...
- jQuery上传文件显示进度条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...
- HTML5上传文件显示进度
下面我们使用Html 5的新特性file api实现上传文件,并显示上传文件进度百分比.意图是这样的,当选择文件时,显示当前文件信息.这里我们是结合Asp.net MVC做为服务端,您也可以是其它的服 ...
- form上传文件以及跨域异步上传
要设置了enctype属性才能上传,需要使用上传的jar包,这里使用的是cos-26Dec2008.jar, 而且后台获取值的时候,getfile要放在第一位 一次设置好上传格式后没有上传文件,也就没 ...
- jQuery Ajax方式上传文件实现暂停或取消上传
未上传时要实现取消,很简单... 但如果用户点击了上传,并加载了进度信息... 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 也可以在 ...
- 用java 代码下载Samba服务器上的文件到本地目录以及上传本地文件到Samba服务器
引入: 在我们昨天架设好了Samba服务器上并且创建了一个 Samba 账户后,我们就迫不及待的想用JAVA去操作Samba服务器了,我们找到了一个框架叫 jcifs,可以高效的完成我们工作. 实践: ...
随机推荐
- 比赛总结:Japan Registry Services (JPRS) Programming Contest 2023 (AtCoder Beginner Contest 324)
比赛:Japan Registry Services (JPRS) Programming Contest 2023 (AtCoder Beginner Contest 324) A-same 1.常 ...
- 解密Prompt系列18. LLM Agent之只有智能体的世界
重新回来聊Agent,前四章的LLM Agent,不论是和数据库和模型还是和搜索引擎交互,更多还是大模型和人之间的交互.这一章我们来唠唠只有大模型智能体的世界!分别介绍斯坦福小镇和Chatdev两篇论 ...
- .NET中的数组在内存中如何布局?
总的来说,.NET的值类型和引用类型都映射一段连续的内存片段.不过对于值类型对象来说,这段内存只需要存储其字段成员,而对应引用类型对象,还需要存储额外的内容.就内存布局来说,引用类型有两个独特的存在, ...
- QT(1)- QString
QT(1)- QString 1 简介 在Qt中表示字符串的类是QString类,它存储字符串是采用的Unicode码,编码方式是使用UTF-16来进行编码的,也就是一个字符(两个字节),一个中文汉字 ...
- 记录一下我的ctf比赛的web题目
Web之getshell: 具体代码如下 <?php highlight_file(__FILE__); error_reporting(0); echo "<h1>WEL ...
- Navicat Premium破解工具及教程
使用Navicat_Keygen_Patch5破解Navicat Premium 更新:2019-06-11 10:16 使用Navicat_Keygen_Patch_v5.0_By_DFoX破解Na ...
- Typora + PicGo 快乐书写 Markdown 文档
声明 以下提及的图床服务商跟本人无任何商业来往,你可以根据自己的需要选择其他更适合的服务商. 个人观点 这是一个服务付费的时代,相比于自己折腾.在价格适当,服务到位的情况下,我更倾向于选择商业服务.毕 ...
- HTML5实战—canvas绘图之贝塞尔曲线
1.二次贝塞尔曲线 quadraticCurveTo(cpx,cpy,x,y) //cpx,cpy表示控制点的坐标, x,y表示终点坐标: 数学公式表示如下: 二次方贝兹曲线的路径由给定点P0.P1. ...
- 关于Maven执行mvn help:system命令报错
报错: [ERROR] Error executing Maven.[ERROR] 2 problems were encountered while building the effective s ...
- MAUI+Masa Blazor APP 各大商店新手发布指南-华为篇
目录 前言 准备材料 一.企业认证 二.审核资料 审核注意事项 总结 前言 AppGallery Connect(简称AGC)是华为应用市场推出的应用一站式服务平台,致力于为开发者提供应用创意.开发. ...