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,可以高效的完成我们工作. 实践: ...
随机推荐
- Go 多版本管理工具
Go 多版本管理工具 目录 Go 多版本管理工具 一.go get 命令 1.1 使用方法: 二.Goenv 三.GVM (Go Version Manager) 四.voidint/g 4.1 安装 ...
- 安装 mysql-community-server报错
错误1. 报错: 所有的匹配结果均已经被参数的模块化过滤条件筛除: mysql-community-server 错误:没有任何匹配: mysql-community-server 解决办法: yum ...
- Java虚拟机(JVM):第五幕:自动内存管理 - HotSpot算法细节以及低延迟垃圾收集器
一.HotSpot算法细节 1.根节点枚举:所有的收集器在根节点枚举的时候,必须暂停用户线程,同时要保证一致性的快照中得以进行.一致性:整个枚举期间执行子系统看起来就像是冻结在某一个时间点上,不会出现 ...
- ABP中关于Swagger的一些配置
Abp 集成 Swagger 官方文档, 请参考 Swagger Integration AspNetCore 配置 Swagger, 请参考 Swashbuckle.AspNetCore 本文的项目 ...
- 【v2v迁移】Xen2kvm 迁移-Windows篇
迁移环境: 源平台:华为FusionComputeV100R006C10SPC101 目标平台:基于KVM虚拟化的云平台,本文以原生的libvirt为例 虚拟机:Windows server 2012 ...
- 多维评测指标解读第17届MSU世界编码器大赛全高清10bit赛道结果
超高清视频纤毫毕现的关键一环. 01 主要指标多项第一,带宽节省48% 近日,第17届MSU世界编码器大赛全高清10bit赛道成绩揭晓,阿里自研的H.266/VVC编码器Ali266在该赛道最高效的1 ...
- 从零开始编写一个 Python 异步 ASGI WEB 框架
从零开始编写一个 Python 异步 ASGI WEB 框架 前言 本着 「路漫漫其修远兮,吾将上下而求索」 的精神,这次要和朋友们分享的内容是<从零开始编写一个 Python 异步 ASGI ...
- P9073 [WC/CTS2023] 楼梯 题解
题目链接 简要题意 有一块楼梯,这里指的楼梯是倒着的,正过来看上一层宽度一定小于等于这一层宽度,并且由格子组成,你需要对其进行增删和恢复某一历史版本的操作,并回答这块楼梯是否有固定格数的子楼梯. 题目 ...
- 【pwn】ciscn_2019_s_3 -- rop,gadget利用,泄露栈地址
这道题挺好的,可以帮助我更好的理解gadget的利用以及rop技术 首先,查一下程序保护情况 拖进ida分析 这里sys_read和sys_write是系统调用函数,看汇编可以分析出来 我们首先要了解 ...
- 从BST到LSM的进阶之路
前言 相信大家之前都了解过很多种数据结构,我之前总是两两的,也就是从局部上去进行比较,没有从整体上进行这些树的发展脉络进行梳理,因此经常看完没多久就忘了.看来确实是需要从本源出发,不仅要知其然还要知其 ...