解决elementPlus的el-upload上传组件，点击预览查看大图，关闭预览大图，自动触发弹出选择图片上传的问题

最新推荐文章于 2024-05-29 17:14:08 发布
最新推荐文章于 2024-05-29 17:14:08 发布
阅读量872 收藏 1
点赞数
文章标签： vue.js 前端 javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77244033/article/details/131787634
版权

由于需求是新增/编辑以dialog展示form表单，上传图片功能，其他都正常但是在el-upload上传图片组件中点击预览查看大图然后再关闭预览的时候就会自动触发上传图片选择文件，这个问题一开始我以为是el-dialog嵌套的问题，以这个方向百度很长时间一直没有得到解决

 仔细看文档对比发现是el-upload嵌套el-dialog的问题

修改后

 问题就解决了
 

2301_77244033
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
elemetUi 组件--el-upload实现上传Excel文件的实例
08-29
elemetUi 组件--el-upload 实现上传Excel文件的实例 elemetUi 组件的 el-upload 是一个功能强大且灵活的上传组件，通过它我们可以轻松地实现文件上传的功能。下面我们将详细介绍如何使用 elemetUi 组件的 el-...
el-upload上传文件缩略图之---查看、下载、删除
MISS_zhang_0110的博客
09-19 3603
【代码】el-upload上传文件缩略图之---查看、下载、删除。
el-upload返回的文件预览excel
最新发布
weixin_45392204的博客
05-29 117
【代码】el-upload返回的文件预览excel。
el-upload 上传、预览、和下载
weixin_42468316的博客
08-24 2920
<el-button type="text" size="small" @click="handlePreview(file)">预览</el-button>" @click="handleRemove(file)">删除</el-button></div>
解决element-ui 使用el-upload组件上传图片成功后，点击预览图片，然后关闭预览窗口触发文件上传的问题
yhl_nsd的博客
06-30 1630
文件上传成功之后，点击预览，点击关闭，预览窗口关闭了，但是要弹出文件上传选择文件的界面。 找了很久不知道什么原因，后面发现我嵌套关系写乱了 正确写法： 我当时写的是,把dialog组件放在了upload中...
vue项目中使用el-upload上传预览tif/tiff文件
前端小白成长记
02-13 2094
vue项目中使用el-upload上传预览tif/tiff文件
vue3 ElementPlus el-upload 图片列表缩略图模式添加查看大图 删除等自定义按钮
weixin_45941959的博客
02-25 3439
【代码】vue3 ElementPlus el-upload 图片列表缩略图模式添加查看大图 删除等自定义按钮。
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
10-18
今天小编就为大家分享一篇vue2.0 使用element-ui里的upload组件实现图片预览效果方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中el-upload上传图片到七牛的示例代码
12-29
一、思路，从后台获取七牛token，上传图片到七牛，获取返回图片路径放入el-upload。 二、代码。 <el v-model=listVideoQuery.orgLogo change=orgLogoChange></el> <el span=10 class=mt10> <el-upload class=...
使用element-ui的upload组件实现上传图片和pdf可查看方法
08-20
本篇文章将详细介绍如何利用Element-UI的`upload`组件来实现图片和PDF文件的上传，并提供查看功能。 首先，`upload`组件是Element-UI中的一个重要组成部分，它提供了文件上传的功能，支持预览、进度条显示、多文件...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
vue3+element-plus上传文件，预览文件
热门推荐
weixin_42255789的博客
01-17 1万+
vue3+element-plus上传文件，预览文件
el-upload 打开文件或图片链接 预览、下载
m0_38109616的博客
10-28 500
第二种 ： onlyoffice插件。第一种 ：直接url 方式。
el-upload实现文件上传（包括预览，下载）建议直接看第二种方法
qq_42192641的博客
09-06 2308
(1)父组件主要el-upload，组件名。
element-plus：Upload多图上传预览
lyna的博客
01-04 4343
Elemen-plus Upload组件
element的el-upload实现多个图片上传以及预览与删除
m0_52611940的博客
07-20 2791
element的el-upload实现多个图片上传以及预览与删除
el-upload单图上传，包含预览、删除、默认显示。
qq_43193513的博客
12-31 5819
<el-form-item label="一号位图：" prop="pgUrl1"> <el-upload action=""<!--指定上传地址，我要自己上传，这样可以防止服务器上产生垃圾数据--> :http-request="gprequestUpload1"<!--覆盖后的上传方法--> list-type="picture-card"<!--...
el-upload上传文件点击预览
11-08
要实现el-upload上传文件后点击预览的功能，可以通过以下步骤实现： 1. 在el-upload组件中添加一个自定义的slot，用于显示预览按钮。 2. 在handleFileChange函数中，将上传的文件保存到一个数组中，同时为每个文件生成一个唯一的id。 3. 在预览按钮的点击事件中，根据文件的id获取对应的文件内容，并将其显示在一个弹窗中。 4. 在弹窗中添加一个删除按钮，用于删除当前预览的文件。 代码示例： ``` <el-upload class="upload-demo" ref="uploadFile" :auto-upload="false" :action="testForm.actionUrl" drag :file-list="testForm.fileList" :on-change="handleFileChange" :on-remove="removeFile" :limit="1" :on-exceed="overLimitCount" > <el-button slot="trigger" size="small" type="primary">选择文件</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> <el-button slot="preview" size="small" type="text" @click="showPreview">预览</el-button> </el-upload> data() { return { testForm: { fileList: [], fileContentList: [] }, previewFileId: '', isShowPreview: false } }, methods: { handleFileChange(files, fileList) { this.testForm.fileList = fileList files.forEach(file => { const reader = new FileReader() reader.readAsText(file.raw) reader.onload = e => { const fileContent = e.target.result.replace(/\n|\r\n/g, '<br/>') this.testForm.fileContentList.push({ id: file.uid, content: fileContent }) } }) }, showPreview() { if (this.testForm.fileContentList.length > 0) { this.previewFileId = this.testForm.fileContentList[0].id this.isShowPreview = true } }, removeFile(file, fileList) { const index = this.testForm.fileContentList.findIndex(item => item.id === file.uid) if (index !== -1) { this.testForm.fileContentList.splice(index, 1) } }, removePreview() { const index = this.testForm.fileContentList.findIndex(item => item.id === this.previewFileId) if (index !== -1) { this.testForm.fileContentList.splice(index, 1) this.isShowPreview = false } } }, computed: { previewFileContent() { const file = this.testForm.fileContentList.find(item => item.id === this.previewFileId) return file ? file.content : '' } } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值