element-ui 上传图片 后清空 图片 显示
使用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 上传图片 后清空 图片 显示的更多相关文章
- Element UI——本地引入iconfont不显示
前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...
- element清空图片显示
使用element-ui,使用el-upload上传图片,上传图片后再次打开还是会有原来的图片,想要清空原来上传的图片,只需要在组件上绑定ref,在提交成功后的方法里调用this.$refs.uplo ...
- vue+ElementUI项目中,上传控件为必填项,上传图片后清空提示信息
(ps:以下是我在项目中遇到得问题及解决方法,希望对你们有帮助.如果还有其他方法,可以留言,谢谢) 一个表单页面,使用element-ui中el-upload上传图片,此项为必填项,然后写了校验规则, ...
- Ueditor富文本编辑器--Ctrl V 粘贴后原有图片显示错误
最近负责将公司官网从静态网站改版成动态网站,方便公司推广营销人员修改增加文案,避免官网文案维护过于依赖技术人员.在做后台管理系统时用到了富文本编辑器Ueditor,因为公司有一个阿里云文件资源服务器, ...
- vue项目中使用element ui上传图片到七牛
1.获取token值 后台有接口调用直接返回token值 //请求后台拿七牛云token async getQiniuToken() { //token let uploadtoken = await ...
- element ui 上传图片
upload在form模块,在demo的基础上包个form然后action写地址用?&拼接参数即可
- Element UI系列:Upload图片自定义上传
HTML部分代码 Javascript部分代码 CSS代码 样式部分可以自由调整 主要实现的原理是利用 http-request 的属性对上传进行自定义
- vue项目在webpack打包后背景图片显示不了
加上 publicPath:'../../'即可
- html上传图片后,在页面显示上传的图片
html上传图片后,在页面显示上传的图片 1.html <form class="container" enctype="multipart/form-data&q ...
随机推荐
- 【Spring】@PathVariable 获取带点参数,获取不全
一.修改前 @GetMapping("/{name:.+}") public String profile(@PathVariable String name, Model mod ...
- [Doxygen].Docygen使用
转自:https://www.cnblogs.com/chenyang920/p/5732643.html Doxygen是一种开源跨平台的,以类似JavaDoc风格描述的文档系统,可以从一套归档源文 ...
- 攻防世界高手进阶之Web_python_block_chain(2018年DDCTFmini blockchain)
打开题目大概看了一下,是有关区块链的题目, 感觉代码要格式化一下,不然没法看 代码格式化站点:https://www.html.cn/tool/js_beautify/ hash of genesis ...
- MongoDB安装启动教程
MongoDB安装启动教程 简易教程:鉴于第一次大家使用分布式数据库,提供一个简易教程(也可看老师的PPT或者视频) 1.点击安装包(老师给的),安装目录不要更改,否则后面配置需要改,可能导致装不上 ...
- ArcGIS 10.2 JavaScript API本地部署离线开发环境
1 获取ArcGIS JavaScript API API的下载地址http://support.esrichina.com.cn/2011/0223/960.html,在下载页面会看到api和sdk ...
- 201671030120 王晶 实验十四 团队项目评审&课程学习总结
项目 内容 课程名称 2016级计算机科学与工程学院软件工程(西北师范大学) 作业要求 实验十四 团队项目评审&课程学习总结 作业学习目标 (1)掌握软件项目评审会流程:(2)反思 ...
- 项目Beta冲刺(团队)——总结篇
项目Beta冲刺(团队)--总结篇 格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺(团队) 团队名称:为了交项目干杯 作业目标:Beta冲刺总结 团队信息 队员学号 ...
- 20180418模拟赛T1——Seq
Seq (seq.cpp/c/pas) 题目描述 Description 木吉要去征讨VAN様,所以他现在需要从他身边的人中选出若干位陪同.现在有\(n\)个人站成一行,木吉要从其中选出\(2\)批在 ...
- wordpress调用指定分类除外的置顶文章
我们有时需要根据实际需要进行一些设置,比如wordpress调用指定分类除外的置顶文章,如何实现呢?随ytkah一起来看看吧,用如下代码插入到需要调取的位置 <div class="r ...
- TestNg用例管理
一.TestNg的数据驱动 1. 数据驱动 1)什么是数据驱动? ·数据驱动是指在一个脚本固定的情况下,用数据来控制该脚本是否运行,以及运行的次数,还有每次运行时对应的参数 2)数据驱动的应用场景: ...