elementUI el-upload上传文件 关闭文件列表

最新推荐文章于 2024-06-22 10:41:50 发布
最新推荐文章于 2024-06-22 10:41:50 发布
阅读量4.7k 收藏 1
点赞数 1
分类专栏： elementUI 文章标签： elementUI 上传组件 show-file-list 隐藏 文件列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/interestANd/article/details/121649599
版权

问题描述

elementUI 在上传文件的时候，默认会在 el-upload 标签的下方会显示选中的文件。有时候我们并不需要这种需求，想将他关闭。

解决方案

打开elementUI 官方文档，我们可以找到 show-file-list这个属性，在没有指定值的时候，默认会是true。我们只要将其设置为 false即可。
在这里插入图片描述
参考代码

<el-upload :show-file-list="false"> </el-upload>
Element-ui 中的上传组件，隐藏的上传文件框
qq_61437464的博客
05-16 1468
Element-ui 中的上传组件，控制el-upload组件中隐藏的上传文件框。
element中el-upload上传文件去掉文件列表
小马甲
11-16 3301
element中el-upload上传文件去掉文件列表
008：vue中el-upload不显示上传的文件列表
大剑师兰特的GIS世界
06-11 4320
如何在el-upload上传完成的时候，去掉列表呢？ 利用 this.$refs.upload.clearFiles();去掉文件列表
vue3 el-upload文件上传隐藏文件列表
jieyucx的博客
12-14 4805
vue3 el-upload文件上传隐藏文件列表
关闭对话框，el-upload清空file-list
Slay__的博客
03-01 6691
如上，每次点开新对话框，上次上传的文件还在，需要关闭对话框时清空。 清空file-list el-upload绑定ref，通过此ref调用el-upload提供的this.$refs.xxx.clearFiles()清空。 关闭对话框调用事件 el-dialog绑定关闭事件@close：@close='closeDialog'，编写该方法实现。 代码 就看el-upload的ref和对话框的close事件。 <el-upload class="upload-demo" .
elementUI el-upload以formData形式请求一次接口，手动上传多文件至服务器
JHY_USER的博客
03-24 4515
效果图如下： index.vue： <el-form ref="importList" :model="importList" label-position="left" label-width="100px" style="width:70%;margin-left:50px;"> <el-form-item label="系统名称：...
el-upload 组件上传文件(查询,上传,删除,下载功能)
最新发布
m0_61601708的博客
06-22 1327
/ this.$global.fileUrl是自己定义的全局服务器地址,直接写服务器地址也行。// 文件上传的头,带token（重要，不然传输大文件会断掉）ruoyi有封装好的,一般在created中自己先获取。// 文件上传成功（上传接口写这，回显的数据处理）// 文件上传前（判断文件类型，大小）// 文件移除时候（删除文件接口写这）// element-ui自带的样式。// 点击文件时候（文件点击下载）// 页面文件回显的list。// 上传的服务器地址。
Vue中使用el-upload实现文件上传的完整指南
pleaseprintf的博客
08-01 4251
在Vue项目中，文件上传是一项常见的功能。Element-UI提供了一个强大的组件el-upload，可方便地实现文件上传功能。本文将详细介绍如何使用el-upload组件，在Vue中实现文件上传，并且提供丰富的示例代码和详细步骤，助你快速掌握文件上传的实现方法。通过本文，你已经学会了在Vue项目中使用el-upload组件实现文件上传功能。在前端，我们通过配置el-upload组件的属性和方法来实现文件上传的交互逻辑；
elementUi中的el-upload结合el-image预览图片
qq_36958916的博客
11-03 1325
elementUi中的el-upload结合el-image预览图片
el-upload上传文件，显示上传进度
qq_45021462的博客
04-24 1万+
el-upload上传文件，显示进度条 deviceFile.vue <el-upload class="upload-demo" ref="upload" action="donothing" :http-request="fileUpload" :multiple="true" :show-file-list="false" :file-list="fileList"> <el-button
【Vue+el-upload】不显示上传的文件列表
栀妹儿的炼丹炉
05-16 9716
解决方法来源大神：【vue Element组件上传文件-去掉文件列表】 如图 1、showUploadList设置成false（网上的其他方法，我亲测不好使qwq 2、利用this.$refs.upload.clearFiles();去掉文件列表 <el-upload ref="upload" class="upload-demo" :action="actionFile" :headers="headersFile" :on-success="onSuccessFile"
element上传文件后清空列表
qq_48354174的博客
03-24 1437
【代码】element上传文件后清空列表。
element中el-upload的取消上传this.$refs.upload.abort()；
热门推荐
Web3 & Basketball
07-14 1万+
在用element中的el-upload方法，并且使用el-progress进度条实现取消上传的功能时候，当点击上传后，进度条正常显示百分比的进度，但是当点击”取消“后，再继续点击”上传“后，发现无法上传，尤其是第一次上传大视频文件（超过800M以上）的时候，这个问题必现，后来查看element的API: https://element.eleme.cn/#/zh-CN/component/upload 发现有一个abort取消上传请求的方法，在el-upload中加入 ref="upload" 后，在取
element ＜el-upload＞ 上传图片后让上传框消失
weixin_43951592的博客
05-16 6787
原本是这样的 上传图片之后（就算你设置了最多只允许上传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 取消自定义文件上传_vue+element 实现选取文件，提交上传全部表单信息（同步）...
weixin_30604459的博客
02-03 575
代码如下：<el-form-item label="Android客户端文件：" prop="file" ref="uploadpic"> <el-upload class="upload-demo" ref="upload" :headers="headers" :action="updateUrl" ...
element ui实现自定义上传文件-以及解决已上传文件列表消失问题
凉城玖的博客
01-13 6458
自定义上传按钮，非自动上传，效果图 action - 就是上传的接口地址 accept - 是限制上传文件格式，设置后只能上传该格式文件， 选取-选取按钮只是选择了文件 ，但是并没有上传 <el-upload class="upload-demo inline-block" :action="commonApi02" ref="upload02" :on-preview="handlePreview"
Vue 59 ，Element 7 ，el-upload 手动上传图片，Vue2 手动上传图片，el-upload上传单张图片，上传后隐藏上传样式
weixin_65793170的博客
10-12 1万+
⭐在上一期中，我们介绍了如何使用 Element Plus 的 el-upload 组件来实现文件上传功能。这里我们分享如何利用 el-upload 组件专门用于图片上传，并实现一些特定的功能需求：限制用户只能上传一次图片，并在成功上传图片后隐藏上传按钮部分。这不仅能够提升用户体验，还能确保数据的一致性和安全性。通过这次分享，希望能为大家提供实用的技巧和示例代码，帮助大家更高效地实现图片上传功能。
elementUI上传组件，上传单个文件后隐藏上传按钮
m0_64512327的博客
02-22 1392
【代码】elementUI上传组件，上传单个文件后隐藏上传按钮。
element-ui upload文件上传,清空文件列表
qq_40788998的博客
03-18 1万+
element-ui upload文件上传,清空文件列表 1.上传组件中需要绑定ref属性 例如ref=“upload” 2.使用 this.$refs.upload.clearFiles()即可清空 这里可以在发送url请求成功之后添加该段代码完成清空文件列表 ref=“属性值” this.$refs.属性值.clearFiles() 是这么一个关系 ...
el-upload自定义上传
07-28
el-upload组件可以实现自定义上传。在使用el-upload组件时，可以关闭自动上传功能，通过绑定自定义的函数来实现文件上传的请求。可以通过设置action属性为"#"来占位，然后在http-request中绑定自定义的handleFileUpload函数来实现文件上传的请求。在handleFileUpload函数中，可以实现自定义的文件上传逻辑。同时，可以通过设置auto-upload属性为false来关闭选择文件后自动上传的功能。\[1\] 在页面中使用el-upload组件时，可以通过el-dialog组件来实现上传附件的对话框。在el-dialog组件中，设置el-upload组件的相关属性，如limit、accept、auto-upload等，来控制上传文件的限制和功能。同时，可以通过设置on-change属性来绑定handleFileChange函数，用于处理文件选择的变化。在handleFileChange函数中，可以获取选择的文件列表，并进行相应的处理。\[2\] 总结来说，el-upload组件可以通过自定义函数来实现文件上传的请求，同时可以通过el-dialog组件来实现上传附件的对话框。通过设置相关属性和绑定相应的函数，可以实现自定义上传的功能。\[1\]\[2\] #### 引用[.reference_title] - *1* *2* [【前端相关】elementui使用el-upload组件实现自定义上传](https://blog.csdn.net/weixin_44299027/article/details/130840926)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [element upload上传文件-自定义上传方式](https://blog.csdn.net/weixin_44313037/article/details/126404948)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值