element中file-upload组件的提示‘按delete键可删除’，怎么去掉

野猪佩奇007

于 2024-04-22 16:28:05 发布

阅读量2k

点赞数 65

文章标签： elementui vue css

本文链接：https://blog.csdn.net/qq_45067263/article/details/138081941

版权

文章讲述了在使用ElementUI中的file-upload组件时遇到的提示覆盖文件名的问题，提供了解决方案，即通过修改`::v-deep`下的特定CSS样式来隐藏默认的删除图标提示。

摘要由CSDN通过智能技术生成

问题描述

element中file-upload组件会出现这种提示‘按delete键可删除’

在这里插入图片描述

解决方案：

这是因为使用file-upload组件时自带的提示会盖住上传的文件名，修改一下自带的样式即可

::v-deep .el-upload-list__item.is-success.focusing .el-icon-close-tip {
  display: none !important;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

野猪佩奇007

关注关注

65
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
element中file-upload组件的提示‘按delete键可删除’，怎么去掉

element中file-upload组件会出现这种提示‘按delete键可删除’
复制链接

扫一扫

element-plus el-table、动态添加、删除行、input输入框

yand_vv的专栏

04-06

4206

组件渲染每个单元格。两个方法，以响应用户的添加、删除操作。找到要删除的行在数组中的索引，并使用。方法，并传入当前操作的行数据作为参数。指令遍历每一项数据，使用普通文本或。数组中添加一个空对象。元素作为表格容器，绑定。数据数组，并分别实现。在这里，我们仍然使用了。

vue element-ui el-upload去除按delete 键可删除提示

总结前端开发中遇到的问题，分享前端知识

04-25

4095

解决办法： <el-upload class="uploadList" ref="upload" :action="baseUrl + '/file/upload'" :before-upload="beforeUpload" :on-preview="handlePreview" :multiple="false" :headers="{ Authorization: token }" :limit="1" :on-remove="handleRemove" :on-exceed="hand..

参与评论您还未登录，请先登录后发表或查看评论

elementUI中Upload 上传图片，上传成功之后。鼠标移入图片位置出现放大和删除按钮

sky_LQ的博客

11-13

6245

1、未上传图片时样式 2、上传成功之后样式 2-1、删除效果 2-2放大效果 3、代码部分 3-1、组件封装（子组件） <template> <divclass="uploadSing"> <el-uploadv-if="ossUpload" v-loading="loading" class="avatar-uploader" :action="action" :show-file-...

element-ui中file-upload组件提示（‘按delete键可删除’）隐藏

最新发布

qq_62733295的博客

10-12

670

/ 这里放置你想要执行的代码。

element ui 上传按delete建可删除

wzwzwz555的博客

01-09

501

出来这个后比较烦自定义样式important;

element upload删除标记去掉

南边木

09-07

758

element-upload

vue element upload组件 file-list的动态绑定实现

10-16

主要介绍了vue element upload组件 file-list的动态绑定实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue-cli3.0+element-ui上传组件el-upload的使用

10-17

在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。首先，`<el-upload>`组件的基本用法...

vue2.0 使用element-ui里的upload组件实现图片预览效果方法

10-18

今天小编就为大家分享一篇vue2.0 使用element-ui里的upload组件实现图片预览效果方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

element Upload上传组件文件上传失败列表依然显示

yfq946910096的博客

04-04

2424

在请求接口失败的回调里通过refs获取组件处理uploadFiles数组即可删除失败文件的数据。使用Upload上传附件，没有在action属性配置上传地址，在onChange 回调函数。里添加上传函数，出现文件上传失败列表依然显示文件，文件上传失败onError回调函数未触发。

element ui el-upload上传附件，删除，预览，上传前验证,删除前验证

qq_39797360的博客

03-24

5515

表单项： file-list=“fileList” 上传附件显示文件名称 limit=“1” 限制上传数量为1 <el-form-item label="附件"> <el-upload class="upload-demo" ...

element-ui中file-upload组件的提示，‘按delete键可删除’去掉

JohnnyAo的博客

09-28

1287

在移动端使用file-upload组件，自带的提示会盖住上传的文件名，修改自带样式即可 /deep/.el-upload-list__item.is-success.focusing .el-icon-close-tip { display: none !important; }

前端基础学习-el-upload上传一次后禁止删除上传的el-upload-list__item

小夭的博客

07-16

5548

前言在最近的开发中遇到了一个需求是，批量上传文件后，禁止对上传的文件进行删除与再次上传的功能。（这里有另外的按钮全部清空上传的文件）解决方法这里其实只要在el-upload组件中添加一个disabled就行，但是我这里根据是否上传过文件去禁用删除按钮了代码 html <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"

【前端相关】elementui使用el-upload组件实现自定义上传

热门推荐

No8g攻城狮的博客

05-24

2万+

官方的描述是说覆盖默认的上传行为，可以自定义上传的实现，类型是 function，可选值与默认值都省略。经过我的探索，我发现它可以接收一个参数，这个参数保存了你文件上传的对象。elmentui 中的upload默认的提交行为是通过 action 属性中输入的 url 链接，提交到指定的服务器上。先定义了一个 el-upload标签，在里面先把自动上传文件关闭，由于action是必填项，所以就塞了个#进去，在。在这个函数里面，我实现了自定义文件上传的请求。上传文件之前的钩子，参数为上传的文件，若返回。

element-ui el-upload框去除‘ 删除文件按钮

King Saj

12-13

3929

需求: 上传的文件是必填项,可以更换,不允许删除效果: 解决方案: // class_file 是el-upload,外层容器的类名,用来区分是否需要删除功能,利用css 隐藏删除按钮 .class_file { /deep/.el-upload-list__item .el-icon-close { display: none !important; } } ...

vue3 ElementPlus el-upload 图片列表缩略图模式添加查看大图删除等自定义按钮

weixin_45941959的博客

02-25

3495

【代码】vue3 ElementPlus el-upload 图片列表缩略图模式添加查看大图删除等自定义按钮。

vue el-upload组件上传单个图片并且带删除和放大

06-09

好的，针对您的问题，我可以提供以下代码示例，用于实现Vue的Element UI Upload组件上传单个图片并带删除和放大功能： HTML模板代码： ``` <template> <div> <el-upload class="upload-demo" action="/your-upload-api" :before-upload="beforeUpload" :on-success="onSuccess" :on-error="onError" :show-file-list="false" > <div v-if="!imageUrl" class="upload-plus"> <i class="el-icon-plus"></i> <div class="upload-text">上传图片</div> </div> <div v-else class="upload-success"> <img :src="imageUrl" alt="uploaded image"> <div class="upload-actions"> <span class="upload-delete" @click="deleteImage">删除图片</span> <span class="upload-enlarge" @click="enlargeImage">放大图片</span> </div> </div> </el-upload> </div> </template> ``` Vue组件代码： ``` <script> export default { data() { return { imageUrl: '' } }, methods: { beforeUpload(file) { const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' if (!isJPG) { this.$message.error('上传图片只能是 JPG 或 PNG 格式！') return false } const isLt2M = file.size / 1024 / 1024 < 2 if (!isLt2M) { this.$message.error('上传图片大小不能超过 2MB！') return false } }, onSuccess(response) { this.imageUrl = response.data.url }, onError(error) { this.$message.error('上传图片失败！') }, deleteImage() { this.imageUrl = '' }, enlargeImage() { this.$alert(`<img src="${this.imageUrl}" style="max-width: 100%;">`, '放大图片', { dangerouslyUseHTMLString: true }) } } } </script> ``` 在该示例中，我们使用了Vue的Element UI Upload组件来实现图片上传功能。我们通过`before-upload`钩子函数来限制上传图片的格式和大小。在上传成功时，我们将返回的图片URL赋值给`imageUrl`属性，以便在页面上显示上传的图片。我们还使用了一个删除按钮和一个放大按钮，分别用于删除和放大图片。当用户点击放大按钮时，我们使用`$alert`方法来展示放大后的图片。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交