使用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. Git for Windows安装教程

    1.国内直接从官网(http://git-scm.com/download/win)下载比较困难,速度极慢,需要翻墙. 这里提供一个国内的下载站,方便网友下载(https://npm.taobao.o ...

  2. Tensorflow中保存模型时生成的各种文件区别和作用

    假如我们得到了如下的checkpoints, 上面的文件主要可以分成三类:一种是在保存模型时生成的文件,一种是我们在使用tensorboard时生成的文件,还有一种就是plugins这个文件夹,这个是 ...

  3. python应用-n颗骰子的和出现的次数

    from random import randint def roll_dice(n): total=0 for _ in range (n): num=randint(1,6) total+=num ...

  4. Easyui 验证验证扩展,限制combobox 只能输入选项内容

    $.extend($.fn.validatebox.defaults.rules, { CHS: { validator: function (value, param) { return /^[\u ...

  5. CSS Cross-Browser Inline-Block

    低版本的IE,火狐 不支持  Inline-Block 属性,想要达到目的我们需要多做一些额外的工作 , 参考页面为:https://blog.mozilla.org/webdev/2009/02/2 ...

  6. 如果wordpress分类只有一篇文章则直接跳转到文章页

    每个项目的需求都不一样,比如最近ytkah的客户提出如果wordpress分类只有一篇文章则直接跳转到文章页,这个实现起来不会很麻烦,几行代码就能搞定,下面就来一起看看吧.打开主题的function. ...

  7. 软件测试之Monkey 初步了解(入门级)

    monkey 介绍 Monkey是Google提供的一个用于稳定性与压力测试的命令行工具.可以运行在模拟器或者实际设备中.它向系统发送伪随机的用户事件(如按键.手势.触摸屏等输入),对软件进行稳定性与 ...

  8. Convert.ToByte((int)val)

    static void Main(string[] args) { ; byte bit8 = Convert.ToByte((int)val); Console.WriteLine("[{ ...

  9. Helm 安装Nginx Ingress

    为了便于将集群中的服务暴露到集群外部,需要使用Ingress.接下来使用Helm将Nginx Ingress部署到Kubernetes上. Nginx Ingress Controller被部署在Ku ...

  10. 一个.java文件中是否可以有多个类

    前段时间,有个同事问到我这个问题:一个.java文件中是否可以有多个类? 答案:可以有多个类,但最多只能有一个被public修饰的class. 且若这个.java文件中有一个public类型的clas ...