el-upload删除按钮，想获取点击图片索引，并删除文件

最新推荐文章于 2024-05-11 14:44:05 发布
最新推荐文章于 2024-05-11 14:44:05 发布
阅读量7.4k 收藏 16
点赞数 6
分类专栏： 前端 文章标签： javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44012722/article/details/106963286
版权
el-upload删除按钮，想获取点击图片索引，并删除文件
废话不多说,上代码
这是我的upload组件

在这里插入图片描述

这是我的删除按钮

在这里插入图片描述

都是官方示例，我稍加了一点属性而已，这里不多解释,我主要讲解删除逻辑在这里插入图片描述
我们通过ref获取到对象后，这个对象就是我们el-upload标签，里面有一个UploadFiles对象，就包含我们已经上传的文件对象，通过它找出我们点击图片对象的索引，这时候你拿到索引就可以做自己另外逻辑，此外移除点UploadFiles对象中我们所点击的图片对象，完成！
.树懒.
关注
  • 6
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
elementui内置upload组件获取dom节点索引的方法小记
shinjie1210的博客
08-10 739
简单记录下 如果是通过一组数据遍历出的dom元素使用upload组件， 要对组件进行修改、删除要通过组件自带的methods几乎不能完成 因为组件自带的methods无法获取当前操作dom的索引，就无法确认操作对象 所以在 ...
el-upload组件去掉删除按钮图标
有问题可关注公众号：前端研究院 后台输入问题回复
07-05 2825
只需加上:disabled="true"就可以去掉
element-ui 中 如何在el-upload的移除文件列表事件 on-remove 中调用后端进行数据库的删除。
最新发布
Mr_TianSDQ的博客
05-11 503
element-ui 中 如何在el-upload的移除文件列表事件 on-remove 中调用后端进行数据库的删除
element ui中el-upload上传图片时的索引(index)获取
KeLiSiTingOne的博客
12-26 1764
----index获取问题,由于是列表上传,索引必须要获取到,element里面没有不支持index获取,所以需要 改进一下方法:on-change="(file,fileList)=>{return handleChange(file,fileList, $index)}",上面用的插槽,index可以轻松获取到。2.on-success以及on-change index获取问题。-----action不管是element里面的。1.action赋值问题。
element：upload上传附件：删除
lyx9611的博客
08-19 2637
<el-upload class="upload-demo" action="#" :file-list="fileList" :before-upload="uploadFile" :on-remove="handleRemove" multiple> <el-button size="small" type="primary" style="margin-top: 10px">点击上传</el-button> <div slot="tip" class="e
关于el-upload上传图片的一些坑clearFiles()的使用
weixin_46421824的博客
10-21 1万+
点击上传图片后 再次点击上传图片 无法更换当前图片 第一次点击上传后，图片上传成功，当再次点击上传，无法更换当前照片，这时候需要使用 clearFiles 清空已上传文件列表 这时候在次点击，就会正常显示更换后照片啦 展示代码 <el-upload ref="upload" :action="uploadUrl" :before-upload="beforeAvatarUpload" :on-success="handleUploadSuccess" :on-erro
循环生成的el-upload如何传递index参数
Gpointy的博客
11-29 601
【代码】循环生成的el-upload如何传递index参数。
elemetUi 组件--el-upload实现上传Excel文件的实例
08-29
主要介绍了elemetUi 组件--el-upload实现上传Excel文件的实例的相关资料,希望通过本文大家能够实现这样的功能，需要的朋友可以参考下
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
主要介绍了vue+elementUI(el-upload)图片压缩,默认同比例压缩操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+axios+el-upload实现文件上传（带参数）：
01-03
备注：不要自己设置请求头类型，让浏览器自己解析，如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误（415错误Unsupported Media Type）；请将此配置注释掉； async uploadFile(...
vue中el-upload上传图片到七牛的示例代码
12-29
一、思路，从后台获取七牛token，上传图片到七牛，获取返回图片路径放入el-upload。 二、代码。 <el v-model=listVideoQuery.orgLogo change=orgLogoChange></el> <el span=10 class=mt10> <el-upload class=...
使用el-upload文件缩略图 删除指定图片
fdadfas的博客
01-12 2158
饿了吗ui的文档上面的删除只给了一个方法，没有具体的操作。 百度上的有些方法是只能删除全部图片 ```javascript //获取上传组件的ref删掉他的全部数据 this.$refs.upload.clearFiles() ``` 但是后面发现这样写不行，对用户太不友好了 所以后面又用这一种写法实现了指定删除 ```javascript let arr = this.$refs.upload.uploadFiles ``` 使用ref的uploadFiles 获取当前组件中的图片数据 ```ja
el-upload调用内部方法删除文件
carcarrot的博客
08-28 5812
从Element UI 的官方文档中，Upload 上传组组件提供了on-remove和before-remove的文件删除的钩子属性（回调方法名），但如何调用组件删除方法（让该方法删除本地上传文件列表以及触发这两个钩子）并无相关说明, 实际可以用以下方法： $refs.upload_attach.$refs['upload-inner'].onRemove(file); $refs.upload_attach.handleRemove(file)
element-ui el-upload组件 on-remove事件 传自定义参数
qq_42312329的博客
08-29 1320
2.methods方法里面。
关于el-upload执行完before-upload事件之后会触发on-remove事件的解决方式
weixin_41897680的博客
10-18 2760
关于el-upload执行完before-upload事件之后会触发on-remove事件的解决方式
ElementUI中使用el-upload上传文件校验不通过时触发on-remove事件
C_B_Y的博客
06-30 1639
问题描述 代码如下：
element upload手动上传并灵活删除文件列表项
weixin_44738844的博客
07-11 5746
点击提交才能上传文件列表，文件列表右侧关闭按钮删除单个文件项目。使用remove和change控制文件列表的增加和删除。手动上传，要关闭自动上传的功能。
解决upload组件自动上传多张图片并转换为id后，删除图片的bug
malala_的博客
07-08 1511
解决upload组件自动上传多张图片并转换为id后，删除图片的bug
element-plus中el-upload组件，实现上传、点击下载、删除功能等
热门推荐
Anony_me的博客
04-19 1万+
主要用到before-remove 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false ，则停止删除，不在执行:on-remove="handleRemove"事件。删除清空存放文件的数组。
el-upload文件删除按钮点击事件
11-21
el-upload组件提供了多种方法来调用删除文件的操作，以触发相应的before-remove钩子、从组件的列表删除对应文件、on-remove钩子。以下是两种常用的方法： 1.使用$refs调用删除文件的操作： ```javascript this.$...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值