<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基础——数字类型int与float、字符串、列表、元组、字典、集合、可变类型与不可变类型、数据类型总结

    文章目录 一 引子 二 数字类型int与float 2.1 定义 2.2 类型转换 2.3 使用 三 字符串 3.1 定义: 3.2 类型转换 3.3 使用 3.3.1 优先掌握的操作 3.3.2 需 ...

  2. 文心一言 VS 讯飞星火 VS chatgpt (111)-- 算法导论10.2 2题

    二.用go语言,用一个单链表 L实现一个栈.要求操作 PUSH和 POP 的运行时间仍为 O(1). 文心一言: 在 Go 语言中,我们可以用结构体来实现一个单链表,然后再用栈的相关操作. 以下是一个 ...

  3. 如何通过代码混淆绕过苹果机审,解决APP被拒问题

    目录 iOS代码混淆 功能分析 实现流程 类名修改 方法名修改 生成垃圾代码 替换png等静态资源MD5 info.plist文件添加垃圾字段 功能分析 实现流程 类名修改 方法名修改 生成垃圾代码 ...

  4. 从零用VitePress搭建博客教程(5) - 如何自定义页面模板、给页面添加独有的className和使页面标题变成侧边目录?

    接上一节:从零用VitePress搭建博客教程(4) – 如何自定义首页布局和主题样式修改? 上一节其实我们也简单说了自定义页面模板,这一节更加详细一点说明,开始之前我们要知道在vitePress中, ...

  5. Unity - UIWidgets 1. 从Hello world开始

    安装参照github的README.UIWidgets相当于Flutter的一个Unity实现(后面表示UIWidgets和UGUI区别时直接称"Flutter"),是把承载的所有 ...

  6. Kubernetes跨StorageClass迁移,切换Rainbond默认SC

    基于主机安装或基于Kubernetes安装的 Rainbond 集群(均使用默认参数安装),默认使用的共享文件存储是 NFS ,以 Pod 方式运行在 Kubernetes 中,但这种方式也有一些无法 ...

  7. 从A+B 到 sin A+cos B 再到 向量A+向量B

    从\(A+B\)到\(\sin A+\cos B\)再到\(\vec{A}+\vec{B}\) 目录 从\(A+B\)到\(\sin A+\cos B\)再到\(\vec{A}+\vec{B}\) 前 ...

  8. React 基础介绍以及demo实践

    这篇文章是之前给新同事培训react基础所写的文章,现贴这里供大家参考: 1.什么是React? React 是一个用于构建用户界面的JavaScript库核心专注于视图,目的实现组件化开发 2.组件 ...

  9. 为什么idea建议使用“+”拼接字符串

    前言 各位小伙伴在字符串拼接时应该都见过下面这种提示: 内容翻译:报告StringBuffer.StringBuilder或StringJoiner的任何用法,这些用法可以用单个java.lang.S ...

  10. 基于Python下MySQL数据库驱动

    由于MySQL服务器以独立的进程运行,并通过网络对外服务,所以,需要支持Python的MySQL驱动来连接到MySQL服务器. 1.mysql-connector-python ​ mysql-con ...