<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. Python面向对象——面向对象介绍、实现面向对象编程、定义类、再调用类产生对象、总结__init__方法、查找顺序

    文章目录 面向对象介绍 实现面向对象编程 一:先定义类 二:再调用类产生对象 总结__init__方法 查找顺序 面向对象介绍 ''' 面向过程: 核心是"过程"二字 过程的终极奥 ...

  2. P8741 [蓝桥杯 2021 省 B] 填空问题 题解

    P8741 [蓝桥杯 2021 省 B] 填空问题 题解 题目传送门 欢迎大家指出错误并联系这个蒟蒻 更新日志 2023-05-09 23:19 文章完成 2023-05-09 23:20 通过审核 ...

  3. [vue]精宏技术部试用期学习笔记 I

    精宏技术部试用期学习笔记(vue) 什么是vue? 我个人对 vue 的理解 是把 html\css\js 三件套融合起来的结构,同时用组件化的思维把一个页面装填起来 同时让页面形成树状结构 优点是方 ...

  4. 探讨C语言中数组、元素内存地址之间的关系

    最近一直在研究C语言,总结出一个结论:C开发者就是和内存与数据结构在打交道. 这篇文章先整理一下内存这块学习到的知识以免后面忘记了. 我们先讨论下数组和指针之间的关系,代码如下: #include & ...

  5. EdisonTalk.MongoProxy组件发布v0.0.6版本

    大家好,我是Edison. 组件发布的背景 之前工作中需要用到MongoDB的事务操作,因此参考了一些资料封装了一个小的组件,提供基础的CRUD Repository基类 和 UnitOfWork工作 ...

  6. 为什么 Django 后台管理系统那么“丑”?

    哈喽大家好,我是咸鱼 相信使用过 Django 的小伙伴都知道 Django 有一个默认的后台管理系统--Django Admin 它的 UI 很多年都没有发生过变化,现在看来显得有些"过时 ...

  7. 五分钟 k8s 实战-应用探针

    今天进入 kubernetes 的运维部分(并不是运维 kubernetes,而是运维应用),其实日常我们大部分使用 kubernetes 的功能就是以往运维的工作,现在云原生将运维和研发关系变得更紧 ...

  8. C#winform中使用SQLite数据库

    公众号「DotNet学习交流」,分享学习DotNet的点滴. SQLite简介 SQLite是一种轻量级的关系型数据库管理系统(RDBMS),它以一个C库的形式提供.以下是SQLite数据库的一些关键 ...

  9. 微盟&致远OA&聚水潭&YonSuite系统对接集成整体解决方案

    前言:大部分的企业都可能只用一套系统组织架构复杂,业务流程繁琐,内部同时有OA系统.BI系统.ERP系统......且各个系统都需要独立登陆,造成IT部门数据监管困难!如何在同一套中台系统上关联多管理 ...

  10. 【Javaweb】jsp | 简单学习【笔记保存】

    什么是jsp,它有什么用? jsp的全称是java server pages.Java的服务器界面. jsp的主要作用是代替Servlet程序回传html页面的数据 因为Servlet程序回传html ...