<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. linux常用命令(六)

    用于查找系统文件的相关命令 grep find locate grep:查找文件中符号条件的字符串(关键词) 命令语法:grep [选项] 查找模式 [文件名] 选项 选项含义 -E 模式是一个可扩展 ...

  2. Dotnet工具箱:开源、免费的纯前端工具网站,带你探索10大工具分类和73个实时在线小工具

    1. 前言 大家好,我是沙漠尽头的狼. Dotnet工具箱是一个纯前端的.开源和免费的工具网站,周末我参考了开源项目it-tools,对网站界面文字进行了汉化,并重新部署了网站.该网站共有10大工具分 ...

  3. 比赛总结: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.常 ...

  4. H5-geolocation学习

    geolocation--定位 PC--IP地址 精度比较低 IP库 Chrome -> Google 手机--GPS window.navigator.geolocation 单次 getCu ...

  5. golang在win10安装、环境配置 和 goland开发工具golang配置 及Terminal的git配置

    前言 本人在使用goland软件开发go时,对于goland软件配置网上资料少,为了方便自己遗忘.也为了希望和我一样的小白能够更好的使用,所以就写下这篇博客,废话不多说开搞. 一.查看自己电脑系统版本 ...

  6. MATLAB(Octave)命令记录

    1. struct:结构体数组 aaaa_s.a = 1; aaaa_s.b = {'A','B','C'} aaaa_s.c = [1 2 3 4; 5 6 7 8]; save aaaa_s.tx ...

  7. picgo+GitHub搭建图床

    picgo+GitHub 搭建图床 目录 picgo+GitHub 搭建图床 图床的概念 使用 GitHub 创建图床服务器 在 GitHub 上面新建仓库 生成 token 令牌 创建 img 分支 ...

  8. Codeforces Round #696 (Div. 2) (A~C题解)

    写在前边 链接:Codeforces Round #696 (Div. 2) A. Puzzle From the Future 链接:A题链接 题目大意: 给定一个\(a\),\(b\),\(d = ...

  9. AdaBoost算法解密:从基础到应用的全面解析

    本文全面而深入地探讨了AdaBoost算法,从其基础概念和原理到Python实战应用.文章不仅详细解析了AdaBoost的优缺点,还通过实例展示了如何在Python中实现该算法. 关注TechLead ...

  10. 企业ERP和泛微OA集成场景分析

    轻易云数据集成平台(qeasy.cloud)为企业ERP和泛微OA系统提供了强大的互通解决方案,特别在销售.采购和库存领域的单据审批场景中表现出色.这些场景涉及到多个业务单据的创建和审批,以下是一些具 ...