使用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. 一键配置树莓派wifi、静态ip等

    系统老是被我玩坏,重新烧录系统后配置又太麻烦,用shell脚本一键配置一下wifi和静态IP #!/bin/bash touch /media/fanghaoyu/boot/ssh echo &quo ...

  2. 浅谈flask源码之请求过程

    更新时间:2018年07月26日 09:51:36   作者:Dear.   我要评论   这篇文章主要介绍了浅谈flask源码之请求过程,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随 ...

  3. ImportError: No module named wx

    先检查下Python中是否有此模块 $ python >>> import wx ImportError: No module named wx  wx模块的确没有安装. 要安装wx ...

  4. 《快活帮》第九次团队作业:【Beta】Scrum meeting 3

    项目 内容 这个作业属于哪个课程 2016计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十三 团队作业9:BETA冲刺与团队项目验收 团队名称 快活帮 作业学习目标 (1)掌 ...

  5. python基础语法4 文件处理

    1.什么是文件 操作系统提供给你操作硬盘的一个工具 2.为什么要用文件 因为人类和计算机要永久保存数据 3.怎么用文件 相对路径:a.txt # 必须与当前py文件在同一级目录绝对路径:D:\项目路径 ...

  6. C# Chart 曲线(多曲线展示)

    //绑定显示曲线数据(Chart控件名:) //X轴标题 this.CurveChart.ChartAreas["ChartArea1"].AxisX.Title = " ...

  7. Passwords Gym - 101174E (AC自动机上DP)

    Problem E: Passwords \[ Time Limit: 1 s \quad Memory Limit: 256 MiB \] 题意 给出两个正整数\(A,B\),再给出\(n\)个字符 ...

  8. MongoDB 聚合查询报错

    1.Distinct聚合查询报错 db.users.distinct("uname") db.runCommand({"distinct":"user ...

  9. Linux下Python3源码安装

    1.下载 wget https://www.python.org/ftp/python/3.7.4/Python-3.7.4.tgz 2.解压 tar -xzvf Python-3.7.4.tgz 3 ...

  10. 用Matlab证明三维勾股定理

    证明代码: syms a b c ; ab=sqrt(a^+b^); bc=sqrt(c^+b^); ca=sqrt(c^+a^); p=(ab+bc+ca)/; s1=(p*(p-ab)*(p-bc ...