解决element-ui 使用el-upload组件上传图片成功后，点击预览图片，然后关闭预览窗口触发文件上传的问题

最新推荐文章于 2024-03-27 15:19:47 发布
最新推荐文章于 2024-03-27 15:19:47 发布
阅读量1.6k 收藏 1
点赞数 3
分类专栏： 前端开发中遇到的问题 文章标签： 前端 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yhl_nsd/article/details/125541144
版权

文件上传成功之后，点击预览，点击关闭，预览窗口关闭了，但是要弹出文件上传选择文件的界面。
在这里插入图片描述
找了很久不知道什么原因，后面发现我嵌套关系写乱了
正确写法：

<el-upload>
</el-upload>

<el-dialog>
	<img/>
</el-dialog>

我当时写的是<el-upload> <el-dialog><img/></el-dialog></el-upload>,把dialog组件放在了upload中

沏欢
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
el-image图片放大后的关闭事件
nick_zhang的博客
02-19 1417
我们知道el-image的放大是由单独的el-image-viewer组件构成，那么这个组件的方法怎么在el-image中的调用呢，看到源码中有个关闭时的回调函数closeViewer，里面是通过showViewer来控制图片放大的显示与隐藏，那么我们只需要监听子组件的showViewer来做对应的事情即可。那么就换种思路，既然最后是点击那么就监听dom的点击事件吧，只要是关闭按钮以及蒙层都做对应的事情即可。但事与愿违，此种监听子组件的方法存在问题，所以先放弃。
Element-UI中Upload上传文件前端缓存处理示例
10-17
在Element-UI中，Upload组件主要用于实现文件上传功能，它是一个强大的、易于使用的组件，能够与后端服务器进行交互，将用户选择的文件传递到指定的URL（即`action`属性）。然而，有时我们可能需要在前端直接处理...
解决elementPlus的el-upload上传组件，点击预览查看大图，关闭预览大图，自动触发弹出选择图片上传的问题
2301_77244033的博客
07-18 853
由于需求是新增/编辑以dialog展示form表单，上传图片功能，其他都正常但是在el-upload上传图片组件中点击预览查看大图然后再关闭预览的时候就会自动触发上传图片选择文件，这个问题一开始我以为是el-dialog嵌套的问题，以这个方向百度很长时间一直没有得到解决。仔细看文档对比发现是el-upload嵌套el-dialog的问题。
Vue element组件el-upload之on-preview图片预览，实战篇之多种预览方式
梦之归途的博客
03-27 2146
Vue图片预览
使用Element的upload上传图片及图片预览，删除等
hu104160112的博客
12-17 3022
代码中都有相关注释，其他属性可查看element官网 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&g.
Vue + element-ui 上传、移除、预览图片
weixin_60463255的博客
12-26 1072
注意：每次上传图片，都需要为上传的UI组件手动指定headers请求头，同时在请求头对象中绑定authorization字段，因为上传组件并没有调用axios，所以我们需要手动指定headers去获取token add.vue > <!-- --> <template> <div> <!-- 面包屑导航区域 --> <!-- 卡片视图区域 --> <el-card> <!--.
element-ui只上传图片不显示继续上传得框
qq_44173499的博客
06-20 921
在upLoad组件上加上:class="{disabled: uploadDisabled }" 具体如下：uploadDisabled: 对应样式：
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
element-ui upload组件多文件上传的示例代码
10-17
Element-UI Upload组件是基于Vue.js的前端框架Element UI中的一个功能强大的上传组件，它提供了丰富的自定义选项和事件处理，适用于多种文件上传场景。在本示例中，我们将深入探讨如何利用Upload组件实现多文件上传...
element-ui 文件上传修改文件名的方法示例
10-16
Element-UI 的文件上传组件 (`el-upload`) 提供了丰富的自定义功能，但默认情况下并不支持直接修改上传文件的名称。这个问题在实际开发中可能会引发数据冲突，例如在静态资源服务器上出现同名文件覆盖的问题。 首先...
element-ui多文件上传的实现示例
10-17
Element-UI是基于Vue.js的组件库，提供了丰富的UI组件，其中包括文件上传组件`el-upload`，它使得在前端实现文件上传变得简单易行。 首先，我们来看一下示例代码中的关键部分。在HTML模板中，`<el-upload>`组件用于...
element ui-upload组件之上传图片（上传成功后实现图片预览和删除）
热门推荐
weixin_45663697的博客
12-01 1万+
**前言** upload上传组件提供了很多种案例，这次列举的是`图片列表缩略图`的上传 1. on-preview 点击文件列表中已上传的文件时的钩子 function(file) 2. on-remove 文件列表移除文件时的钩子 function(file, fileList) 3. on-success 文件上传成功时的钩子 function(response, file, fileList) add.vue <template> <!-- 图片上传 --> <
element-ui upload 照片墙回显，隐藏上传按钮，选择与提交分开
weixin_42418774的博客
07-01 4476
1.上传的是paf，所以照片墙是一片空白，所以需要利用返回的数据来回显url在照片墙 2.限制上传数为1，选择上传文件后，上传按钮隐藏，直到把上传的文件移除操作再显示 3.把选择文件和点击确定最终上传分开 最开始先来讲1和2，这里也是分开上传的，但是是两个接口，所以下面会单独解释纯前端实现分开操作上传 <el-upload :class="{uoloadSty:showBtnImg,disUoloadSty:noneBtnImg}" //隐藏显示上传按钮style style="ma
el-upload组件去掉删除按钮图标
有问题可关注公众号：前端研究院 后台输入问题回复
07-05 2834
只需加上:disabled="true"就可以去掉
element ＜el-upload＞ 上传图片后让上传框消失
weixin_43951592的博客
05-16 5993
原本是这样的 上传图片之后（就算你设置了最多只允许上传1张照片，右边这个上传框也不会消失） 而我们要的效果是上传之后，如下所示 实现方法： <el-upload :file-list="file_list" :on-change="changeFile" action="#" ref="editEnc" :class="{stleA:file_list.length === 0,styleB:file_list.length === 1}" list-type="pict
解决 element-ui 中的 upload 组件在 form 表单中校验时提示信息不会消失的问题
来杯卡布奇诺的博客
09-26 1614
在 el-form-item 组件上加个 ref，在上传成功后的回调函数中调用 this.$refs.xxx.clearValidate() 清除验证信息。使用 element ui 时，一个表单中有上传组件 upload，然后写了校验规则，当不上传图片时，会提示请上传图片，当上传图片后，提示不会消失。
Vue ， Element-ui实现 pdf文件禁止预览直接下载
weixin_41346436的博客
06-18 2345
Vue实现pdf文件禁止预览，直接下载 此功能很常见，但是网上其他案例教程太过繁琐，在此用最快简单的方式实现 一般情况下，后端返回的pdf文件是以文件流的形式返回，直接打开的话任何浏览器会解析PDF文件，直接显示的预览效果，而我们需要的是禁止预览直接下载 后端返回的文件流，一般是乱码的 实现方式： 1：安装downloadjs 下载插件依赖 npm install downloadjs 2：引入所需要的页面，如果想全局使用，可以再main.js中引入 import download from 'dow
element-ui dialog弹出层点击空白、ESC不关闭弹出框
network_liuxu的博客
09-29 1168
element-ui dialog弹出层点击空白、ESC不关闭弹出框
ElementUi中实现点击Dialog对话框不关闭效果
weixin_46178852的博客
12-12 1189
最近用到了Elementui 中的dialog的组件，当出现对话框的时候我点击遮罩层就把对话框已经关闭了，而需要实现的效果是点击遮罩层对话框不允许关闭的。最终的解决方案是需要在main.js中加入如下代码即可： //配置dialog组件点击遮罩层不关闭 Element.Dialog.props.closeOnClickModal.default = false; ...
element ui el-upload文件预览
最新发布
04-18
Element UI的el-upload组件可以用于文件上传，并且支持文件预览功能。在使用el-upload组件时，你可以通过设置属性来启用文件预览功能。 首先，确保你已经正确引入了Element UI库和el-upload组件。然后，在你的代码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值