社区
CSS
帖子详情
el-upload如何手动触发删除事件
前端开发小能手
2020-08-26 10:33:37
如题,el-upload做了一个图片缩略图,官网上的实例(list-type="picture-card")。想要做一个手动删除缩略图的功能,但是突然发现不知道怎么触发删除事件。
注:不是el-upload自带的删除事件,是我另外写了一个button,用这个button来触发
beforeupload和on-remove是触发删除事件后才执行的,我要的是触发事件
...全文
21263
8
打赏
收藏
el-upload如何手动触发删除事件
如题,el-upload做了一个图片缩略图,官网上的实例(list-type="picture-card")。想要做一个手动删除缩略图的功能,但是突然发现不知道怎么触发删除事件。 注:不是el-upload自带的删除事件,是我另外写了一个button,用这个button来触发 beforeupload和on-remove是触发删除事件后才执行的,我要的是触发事件
复制链接
扫一扫
分享
举报
写回复
配置赞助广告
用AI写文章
8 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
前端开发小能手
2020-09-02
打赏
举报
回复
谢谢,已经找到解决方法,用fileList处理的fileList.splice(index,1);
佰年健康君
2021-10-13
举报
回复
@前端开发小能手
具体些吗
qq_51614889
2023-08-17
举报
回复
@前端开发小能手
清空了,但是列表还显示,你怎么解决的
亦夜
2020-08-30
打赏
举报
回复
upload不是有个手动上传文件吗,this.$refs.upload 你可以看一下获取到的组件内部是否提供了删除方法,如果没有,你可以自己对源码进行修改添加删除方法触发内部的删除事件,而且他还提供了clearFiles方法,这个跟submit一样都是可以手动触发的
那一眼
2021-07-02
举报
回复
@亦夜
clearFiles我用了,这个方法清空不了
一介青烟小生
2020-08-29
打赏
举报
回复
实在不行,你就把那个文件列表给清空了,this.filelist = []
面向百度编程cv
2020-08-29
打赏
举报
回复
我也做个类似的,估计做不到哦,你想单独触发,还不是要组件的原生事件
前端开发小能手
2020-08-27
打赏
举报
回复
自己顶一下
el
-
upload
用代码
手动
删除
附件
this.$refs.
upload
.abort(file) //
upload
:
el
-
upload
的ref值;file:File类型,file文件本身 fil
eL
ist.splice(fil
eL
ist.indexOf(file), 1) // fil
eL
ist: 文件列表,钩子函数中的fil
eL
ist this.onRemove(file, fil
eL
ist) // 调用钩子函数on-remov...
el
-
upload
手动
控制上传多文件校验和文件
删除
之前写过一篇关于
el
-
upload
单文件自定义上传文章:axios+
el
ementui的
upload
使用http-request自定义文件上传_Suk_阿硕的博客-CSDN博客_http-request自定义文件上传<!-- 关于组件的部分属性: action:上传的地址,和axios没关系,
el
ementui自己发请求 :show-file-list:是否显示上传的文件列表 :on-success:上传成功的回调 :on-error:上传失败的回调 :before-
upload
:上传之前的回调,可.
el
ementUI
el
-
upload
以formData形式请求一次接口,
手动
上传多文件至服务器
效果图如下: index.vue: <
el
-form ref="importList" :mod
el
="importList" lab
el
-position="left" lab
el
-width="100px" style="width:70%;margin-left:50px;"> <
el
-form-item lab
el
="系统名称:...
el
-
upload
调用内部方法
删除
文件
从
El
ement UI 的官方文档中,
Upload
上传组组件提供了on-remove和before-remove的文件
删除
的钩子属性(回调方法名),但如何调用组件
删除
方法(让该方法
删除
本地上传文件列表以及
触发
这两个钩子)并无相关说明, 实际可以用以下方法: $refs.
upload
_attach.$refs['
upload
-inner'].onRemove(file); $refs.
upload
_attach.handleRemove(file)
手动
触发
el
-
upload
所有的上传文件都是基于input实现的,所以只需要找到
el
-
upload
组件中的input
触发
它的click
事件
即可。
CSS
61,117
社区成员
60,701
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章