使用element-ui组件,用el-upload上传图片,上传图片后再次打开还是会有原来的图片,想要清空原来上传的图片,只需要在组件上绑定ref,在提交成功后的方法里调用this.$refs.upload.clearFiles();就可以清除原来上传的文件。

示例:

<el-row>
<el-upload
ref='upload' //清空图片数组的
class="upload-demo"
drag
:headers="headers" //请求头
:action="action" //请求路径
:onError="uploadError" //上传失败调用的方法
:onSuccess="uploadSuccess" //上传成功调用的方法
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-row> ... //执行
this.$refs.upload.clearFiles();

element-ui 上传图片 后清空 图片 显示的更多相关文章

  1. Element UI——本地引入iconfont不显示

    前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...

  2. element清空图片显示

    使用element-ui,使用el-upload上传图片,上传图片后再次打开还是会有原来的图片,想要清空原来上传的图片,只需要在组件上绑定ref,在提交成功后的方法里调用this.$refs.uplo ...

  3. vue+ElementUI项目中,上传控件为必填项,上传图片后清空提示信息

    (ps:以下是我在项目中遇到得问题及解决方法,希望对你们有帮助.如果还有其他方法,可以留言,谢谢) 一个表单页面,使用element-ui中el-upload上传图片,此项为必填项,然后写了校验规则, ...

  4. Ueditor富文本编辑器--Ctrl V 粘贴后原有图片显示错误

    最近负责将公司官网从静态网站改版成动态网站,方便公司推广营销人员修改增加文案,避免官网文案维护过于依赖技术人员.在做后台管理系统时用到了富文本编辑器Ueditor,因为公司有一个阿里云文件资源服务器, ...

  5. vue项目中使用element ui上传图片到七牛

    1.获取token值 后台有接口调用直接返回token值 //请求后台拿七牛云token async getQiniuToken() { //token let uploadtoken = await ...

  6. element ui 上传图片

    upload在form模块,在demo的基础上包个form然后action写地址用?&拼接参数即可

  7. Element UI系列:Upload图片自定义上传

    HTML部分代码 Javascript部分代码 CSS代码 样式部分可以自由调整 主要实现的原理是利用 http-request 的属性对上传进行自定义

  8. vue项目在webpack打包后背景图片显示不了

    加上 publicPath:'../../'即可

  9. html上传图片后,在页面显示上传的图片

    html上传图片后,在页面显示上传的图片 1.html <form class="container" enctype="multipart/form-data&q ...

随机推荐

  1. JS 基本操作

    1.判断数据是否包含某些数据 var ary=[{age:20,name:"a"},{age:20,name:"b"},,{age:30,name:" ...

  2. 使用NB Exploit Kit攻击的APT样本分析——直接看流程图,就是网页挂马,利用java和flash等漏洞来在你主机安装和运行恶意软件

    使用NB Exploit Kit攻击的APT样本分析 from:https://cloud.tencent.com/developer/article/1092136 1.起因 近期,安恒工程师在某网 ...

  3. ubuntu坑(持续更新~)

    0.you should not install packages from any repository that represents a different system version to ...

  4. P1092 虫食算[搜索]

    这个式子是是由\(A\sim A+N\)组成的,那么\(A\sim A+N\)就只能等于\(0\sim N-1\),因此我们每次对\(A\sim A+N\)的取值做一个新的排列,然后judge一下当前 ...

  5. 28、Python网络编程

    一.基于TCP协议的socket套接字编程 1.套接字工作流程 先从服务器端说起.服务器端先初始化Socket,然后与端口绑定(bind),对端口进行监听(listen),调用accept阻塞,等待客 ...

  6. 【Spark】ScalaIDE运行spark,A master URL must be set in your configuration

    or SparkSession.master("local")

  7. Linux:使用awk命令获取文本的某一行,某一列;sed插入指定的内容到指定文件中

    awk相关用法: 1.打印文件的第一列(域)                 : awk '{print $1}' filename2.打印文件的前两列(域)                 : aw ...

  8. 大文件上传组件webupload插件

    之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...

  9. for、for...in、for...of的区别

    当有一个元素未定义时,for和for...of遍历该元素为undefined,for...in遍历不到. 如果是自定义属性,for和for...of无法遍历,for...in可以遍历. for...i ...

  10. Kafka的基本概念

    Kafka的前身是由LinkedIn开源的一款产品,2011年初开始开源,加入了 Apache 基金会,2012年从 Apache Incubator 毕业变成了 Apache 顶级开源项目. Top ...