element-ui 上传图片后清空图片显示的实例

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

具体如下：

<el-upload
 ref='upload'
 class="upload-demo"
 action="https://jsonplaceholder.typicode.com/posts/"
 :on-change="handleChange"
 :file-list="fileList3">
 <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
this.$refs.upload.clearFiles();

以上这篇element-ui 上传图片后清空图片显示的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用Vue实现图片上传的三种方式

    项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element-ui,封装组件为例子聊聊如何实现这个功能.其他框架或者不用框架实现的思路都差不多,本文主要聊聊实现思路. 1.云储存 常见的 七牛云,OSS(阿里云)等,这些云平

  • 基于VUE选择上传图片并页面显示（图片可删除）

    基于VUE选择上传图片并页面显示（图片可删除）

    基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件:jqueryform HTML文本内容: <template> <div id="accident"> <div class="wrapper"> <i class="icon-pic"></i>相关照片 <button type="button" @click="

  • 使用elementUI实现将图片上传到本地的示例

    查阅饿了吗官方文档可以了解上传组件的使用方法.http://element.eleme.io/#/zh-CN/component/upload 前台的页面代码为: <el-upload class="upload-demo" ref="upload" action="http://127.0.0.1:20001/Administration/MediaApiLhUploadHandler" :on-preview="handleP

  • element-ui 上传图片后清空图片显示的实例

    使用element-ui,使用el-upload上传图片,上传图片后再次打开还是会有原来的图片,想要清空原来上传的图片,只需要在组件上绑定ref,在提交成功后的方法里调用this.$refs.upload.clearFiles();就可以清除原来上传的文件. 具体如下: <el-upload ref='upload' class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"

  • vue使用element实现上传图片和修改图片功能

    vue使用element实现上传图片和修改图片功能

    目录 前言 一.应用场景 1.上传图片并进行放大预览 2.图片上传代码 二.修改已经上传的图片,并展示到图片列表中 1.效果展示(先展示原来的图片,再上传新图片,也可删除原来的图片) 2.编辑代码 总结 前言 开发后台管理项目时,遇到了上传图片的模块,这个比较简单,但是保存后的图片需要编辑就比较麻烦了,自己记录一下,也分享一下,多多指教 一.应用场景 1.上传图片并进行放大预览 2.图片上传代码 我这里的实现是直接将图片上传到接口,成功后返回图片路径,表单提交时,后台要路径拼成的字符串格式,类似

  • PHP上传图片到数据库并显示的实例代码

    PHP上传图片到数据库并显示的实例代码

    PHP上传图片到数据库并显示 1.创建数据表 CREATE TABLE ccs_image ( id int(4) unsigned NOT NULL auto_increment, description varchar(250) default NULL, bin_data longblob, filename varchar(50) default NULL, filesize varchar(50) default NULL, filetype varchar(50) default N

  • ASP.NET中图片显示方法实例

    本文实例讲述了ASP.NET中图片的显示方法.分享给大家供大家参考.具体如下: genimage.ashx: 复制代码 代码如下: <%@ WebHandler Language="C#" Class="netpix.ImageGenerator" %> genimage.ashx.cs: // Copyright (C) 2003 by Greg Ennis // (mailto:greg@ennis.net) // // The contents o

  • vue Element UI扩展内容过长使用tooltip显示示

    vue Element UI扩展内容过长使用tooltip显示示

    目录 1. 介绍 2. element-ui(vue2版本) 2.1 注册指令 1) akTooltipAutoShow.js 2.2 使用 3. element-plus(vue3版本) 3.1 注册指令 1) akTooltipAutoShow.js 2) 进行局部或全局注册 3.2 使用 1. 介绍 Tooltip常用于展示鼠标 hover 时的提示信息. 而在实际过程中,有这么一个需求:只有文字内容排不下,出现省略号,才需要显示tooltip的提示内容. 本文章的思路是通过一个自定义指令

  • 解决Vue的项目使用Element ui 走马灯无法实现的问题

    1.在vue项目中引入element ui http://element.eleme.io/#/zh-CN/component/carousel 引入后,HTML部分 <el-carousel height="150px"> <el-carousel-item v-for="item in imgList" :key="item" height="300px" > <h3><img :

  • element ui提交表单返回成功后自动清空表单的值的实现代码

    在实际开发中,新增弹窗的form表单中输入内容后,新增成功后应该把form表单清空,不然下次再进入新增弹窗时,会有上次新增完的内容 方法一:form表单项少的话可以选择手动删除: this.loginForm = { name:'', username:'', password:'', confirm: '', department: '', phone: '' } 方法二:以上的方法当然也是可以的,但是如果form表单有很多项的话,你需要写很多清空代码:elementui中的form提供res

  • Vue + Element UI图片上传控件使用详解

    Vue + Element UI图片上传控件使用详解

    上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义 主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用.首先要安装element并中引入,安装引入过程这里不再赘述. 1.引用element 上传控件. <el-upload action="/mgr/common/imgUpload"//这里需要配置一下文件上传地址(跨域) list-type=&qu

  • Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

    Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

    本文为大家分享了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义,供大家参考,具体内容如下 1.安装 npm install vue-quill-editor --save 2.在main.js中引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quil

  • element ui循环调用this.$alert 消息提示只显示最后一个

    element ui循环调用this.$alert 消息提示只显示最后一个

    目录 需求背景 问题分析 MessageBox 类的实现 查看 showNextMsg 方法的实现 DEMO演示 需求背景 有一个需求,使用element-ui 中的$alert 方法提示 用户几条信息,不能一次性提示.仅能一条一条的提示,提示完第一条,点击确定后如果还有待提示消息,就弹出提示第二条,以此类推,直到消耗完所有需要提示的消息结束:现在模拟复现一下这个需求的期望如下图: 那这还不简单??? 我们听完需求心中已经想好了代码怎么写了.于是我们摩拳擦掌 说干就干, 一顿 C & V 操作,

随机推荐