<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上传文件显示进度条,当上传完成后间隔一秒进度条消失的更多相关文章

  1. ajax上传文件显示进度

    下面要做一个ajax上传文件显示进度的操作,文末有演示地址 这里先上代码: 1.前端代码 upload.html <!DOCTYPE html> <html lang="e ...

  2. Linux学习23-Xftp上传文件显示乱码问题

    前言 当我们在windows新建一个文件,里面有中文时,使用Xftp上传到linux服务器上,会出现乱码问题. Windows的默认编码为GBK Linux的默认编码为UTF-8 Xftp上传文件乱码 ...

  3. 一般处理程序上传文件(html表单上传、aspx页面上传)

    html 表单上传文件        一般处理程序由于没有 apsx 页面的整个模型和控件的创建周期,而比较有效率.这里写一个用 html 表单进行文件上传的示例.        1. 表单元素选用 ...

  4. 在使用 AjaxFileUpload 上传文件时,在项目发布到 iis 后,图片不能预览

    在使用 AjaxFileUpload  上传文件时,图片已经上传成功了,在站点没有发布时,可以预览,可是在项目发布到 iis 后,图片就不能预览,在网上找了很多的方案也没解决,最后的解决方案如下: 1 ...

  5. axios+Vue上传文件显示进度

    一,前言 最近在用Vue,然后上传文件时需要显示进度,于是网上搜了一下,经过自己实测终于也弄明白了 二,效果 三,代码 HTML代码 <div id="app"> &l ...

  6. jQuery上传文件显示进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...

  7. HTML5上传文件显示进度

    下面我们使用Html 5的新特性file api实现上传文件,并显示上传文件进度百分比.意图是这样的,当选择文件时,显示当前文件信息.这里我们是结合Asp.net MVC做为服务端,您也可以是其它的服 ...

  8. form上传文件以及跨域异步上传

    要设置了enctype属性才能上传,需要使用上传的jar包,这里使用的是cos-26Dec2008.jar, 而且后台获取值的时候,getfile要放在第一位 一次设置好上传格式后没有上传文件,也就没 ...

  9. jQuery Ajax方式上传文件实现暂停或取消上传

    未上传时要实现取消,很简单... 但如果用户点击了上传,并加载了进度信息... 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 也可以在 ...

  10. 用java 代码下载Samba服务器上的文件到本地目录以及上传本地文件到Samba服务器

    引入: 在我们昨天架设好了Samba服务器上并且创建了一个 Samba 账户后,我们就迫不及待的想用JAVA去操作Samba服务器了,我们找到了一个框架叫 jcifs,可以高效的完成我们工作. 实践: ...

随机推荐

  1. C#学习笔记--面向对象三大特征

    C#核心 面向对象--封装 用程序来抽象现实世界,(万物皆对象)来编程实现功能. 三大特性:封装.继承.多态. 类与对象 声明位置:namespace中 样式:class 类名{} 命名:帕斯卡命名法 ...

  2. CF1676G

    题目简化和分析: 求一颗子树的黑白两数是否相等. 我们设黑 \(1\),白 \(-1\),若某一棵子树的权值为 \(0\),说明此刻的黑白个数相等,贡献加一. 从根搜索,每次将值传递给父亲,判断父亲此 ...

  3. .NET周刊【10月第2期 2023-10-08】

    国内文章 起风了,NCC 云原生项目孵化计划 https://www.cnblogs.com/liuhaoyang/p/ncc-the-wind-rises.html 2016年,我和几位朋友发起了. ...

  4. C#_TCPClient异步连接和接收消息

    //c#不愧是全能型的语言,异步连线程都省了 class State { public byte[] bufferCache; public TcpClient tcpClient; } ... pr ...

  5. 2023 SHCTF-校外赛道 WEB WP

    WEEK1 babyRCE <?php $rce = $_GET['rce']; if (isset($rce)) { if (!preg_match("/cat|more|less| ...

  6. P4221 [WC2018]州区划分 题解

    题目链接 题目描述 给出 \(n\) 个城市,\(m\) 条边,一个划分合法当且仅当所有划分中的点集和集合中点之间存在的边集所构成的图不构成欧拉回路且联通. 定义一个点集的值为 划分的总值为其中所有点 ...

  7. DS18B20初始化-读-写-温度转换

    DS18B20 (一)初始化 (二)读字节 (三)写字节 (四)温度转换 1获得数据 2转换数据 (一)初始化 初始化时序: 数据线先拉到高电平,稍作延时即可(刚开始是高电平还是低电平芯片手册上其实不 ...

  8. 2023-11-11:用go语言,字符串哈希+二分的例题。 给定长为 n 的源串 s,以及长度为 m 的模式串 p, 要求查找源串中有多少子串与模式串匹配, s‘ 与 s 匹配,当且仅当 s‘ 与 s

    2023-11-11:用go语言,字符串哈希+二分的例题. 给定长为 n 的源串 s,以及长度为 m 的模式串 p, 要求查找源串中有多少子串与模式串匹配, s' 与 s 匹配,当且仅当 s' 与 s ...

  9. 格局决定结局,进化还是毁灭,Prompt在其中扮演什么角色

    GPT 时代, Prompt 的价值你们可能不懂 最近, OpenAI 推出了基于 GPT 模型的 GPTs 以及 Agent Stroe 系统,引发广泛关注.业内讨论热点主要集中在吸引用户体验方面. ...

  10. powerdesigner 生成sql语言

    首先要确定的是自己已经准备好一个概念模型 在概念模型界面点击上方工具栏中的Tools->Generate logical data model.. 生成逻辑模型 同样的操作生成物理模型 Gene ...