文件上传 upload 组件 on-success 事件，添加自定义参数

最新推荐文章于 2025-09-28 18:18:21 发布
原创 最新推荐文章于 2025-09-28 18:18:21 发布 · 4.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
_格鲁特宝宝原创，转载请务必注明出处
文章标签：

#on-success #upload #upload 上传 #upload 上传组件 #upload 上传成功事件

这篇博客探讨了在文件上传组件中如何利用`on-success`事件添加自定义参数，例如添加下标来区分不同的upload组件。通过示例`on-success=(response,file,fileList) => handleSuccess(response, file, fileList, 1)`，作者说明了如何将参数1作为自定义标识，以便在处理上传成功后的回调中进行区分和操作。这对于管理多个并行的上传任务至关重要。

文件上传 upload 组件 on-success 事件，添加自定义参数

:on-success="(response, file, fileList) => handleSuccess(response, file, fileList, 1)"

参数 "1" 就是添加的自定义参数。

多个上传组件也可以传入下标来区分当前使用的 upload 组件是哪一个。

el-upload 组件在 on-success 文件上传成功的钩子中传递更多参数
m0_38109616的博客
10-31 1284
el-upload 组件在 on-success 文件上传成功的钩子中传递更多参数
Taro+NutUI+vue3+TypeScript - 图片上传
qq_34111842的博客
12-08 1920
Taro+Vue3+TypeScript实现手机相册图片上传功能。
element-ui upload组件 方法添加自定义参数
m0_47005349的博客
04-01 965
原始写法： :on-success="handleAvatarSuccess" 加入自定义参数 :on-success="function (res, file) { return handleAvatarSuccess(res, file, index) }" handleAvatarSuccess(res, file, index) { },
Element-plus文件上传
风情
04-15 974
【代码】Element-plus文件上传。
vue+ElementUI使用Upload上传图片不触发OnSuccess
最新发布
yukunjiename的专栏
09-28 180
但是执行完成上述代码，发现最重要的handleSuccessH没有执行，查询资料，有说action的原生方法被http-request覆盖，需要手动触发onsuccess方法，修改过后也不行。后面在统一修改后台请求为异步的时候，发现，将方法uploadImageH修改为异步方法之后，组件的on-success方法就能正常执行，也满足了逻辑要求。首先需求如下，需要做多文件上传，且需要预览上传图片，查看upload控件，只有list-type="picture-card"这种方式最合适。
文件上传on-success事件有三个默认参数，想要增加自定义形参，例如循环数组的下标
weixin_44093954的博客
11-22 3259
:on-success=" (response, file, fileList) => headPicHandleSuccess( response, file, fileList, index ...
vue上传图片 :on-success成功后传第三方参数
qq_42740298的博客
04-24 719
vue上传图片 :on-success成功后传第三方参数
element-plus中el-upload 组件:on-success方法传递其他参数
cyj0919的博客
07-18 870
【代码】element-plus中el-upload 组件:on-success方法传递其他参数。
精选资源
el-upload多文件一次性上传(携带json)，自定义上传事件(手动上传），不使用action属性上传.pdf
12-16
在本文中，我们将深入探讨如何使用`el-upload`组件实现多文件一次性上传，同时携带JSON数据，并自定义上传事件，不依赖`action`属性。`el-upload`是Element UI库中的一个组件，用于文件上传操作，提供了丰富的配置...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法是在模板中创建一个元素，通过属性来控制它的行为。例如： ```html <el-upload class=...
element-ui单个上传组件el-upload文件回显+el-table组件遍历上传+自定义文件列表+合并表格
weixin_45408578的博客
01-15 2506
单个上传组件el-upload文件回显+el-table组件遍历上传+自定义文件列表+合并表格
Vue - el-upload 组件在 on-success 文件上传成功的钩子中传递更多参数
s_156的博客
11-21 996
Vue - el-upload 组件在 on-success 文件上传成功的钩子中传递更多参数
el-upload上传文件方法自定义参数
qq_30136729的博客
11-28 3368
这几天在是实现上传文件的功能，使用element-ui的el-upload组件 需求是上传成功之后再将返回的文件上传到服务器，因为不同用户身份上传需要做的处理不通，需要传参，用来区别不同的身份。 官方文档中上传成功时调用钩子函数存在三个参数。还需要我们的自定义参数index,这时的写法应该是： :on-success="(response,file,fileList)=>successUpload(response,file,fileList,index)" 相应的s方法处写法也应该是： //文件
ElementUI中el-upload上传图片组件上传成功函数传自定义参数
小星落
03-09 3051
on-success="(res,file)=>{AvatarSuccess(item,res,file)}"这样就可传自定义的参数了 <el-upload class="avatar-uploader uploadImg" action="https://xxx/putImg/" :headers="{'Authorization':'Bearer '+ token}" :on-success="(
在＜el-upload＞ 组件中，调用默认的事件方法传递添加参数
m0_68956554的博客
08-22 499
【代码】在＜el-upload＞ 组件中，调用默认的事件方法传递添加参数。
el-Upload 上传组件，on-success方法response返回值为空
ZYXKN的博客
03-13 1861
家人们谁懂啊，我最近在用el-upload组件做上传用户的头像的功能，用的是它自带的action方法自动上传，它不是有个on-success方法吗，是个回调函数，上传成功后会返回三个参数，response（是一个表示上传成功后服务器返回的响应数据的对象）, file(是一个表示上传的文件的对象), fileList (当前已上传的文件列表)后面发现我的后端返回的接口，定义的url是字符类型的，然后Result类里面我定义两个同名不同参的方法，因为是String类型的把他识别成了msg 而不是 data！
el-upload 多文件 上传 只执行一次成功回调on-success的问题
懒洋洋
07-23 1万+
el-upload批量上传只执行一次成功回调on-success的问题 问题已解决，如图，附上链接 https://nyd0u5wyud.feishu.cn/docs/doccnLoii5xShTk7yiPXTzD9Suh
VUE 页面包含多个upload组件时，在on-success里面传参
热门推荐
zj25xy11的博客
09-28 3万+
之前网上看到有这样的一个标题，但是没有具体说出解决的方案，昨天捣腾了半天 终于在配合接口的情况下解决了这个问题。 1、问题描叙 场景设定：在图片图片的管理后台，需要对每个投票都上传图片，且投票的选项是可以增加和删除的，这个时候使用vue的上传就没法再on-success 回调的时候知道是哪个选项的图片了。类似的场景还有很多，最近我在做的一个项目就是如此，一个广告位的默认展示图片，产品需要能够上传多...
el-upload在on-success中带参数
08-22
在ElementUI的upload组件的on-success钩子中，只能传递response、file和fileList这三个参数。如果想要传递更多的参数，可以通过使用匿名函数来实现。在匿名函数中，可以调用自定义的函数，并将额外的参数作为参数传递给该函数。例如，在el-upload的on-success属性中，可以使用匿名函数来调用imgHandleSuccess函数，并将response和scope.row作为参数传递给该函数。具体代码如下所示： ```html <el-table-column label="图片"> <template slot-scope="scope"> <el-upload :action="imgURL" :on-success="function(response) { imgHandleSuccess(response, scope.row) }"> <el-button size="small" type="primary">上传图片</el-button> </el-upload> </template> </el-table-column> ``` 在这个例子中，imgHandleSuccess函数会接收两个参数，response和scope.row。这样就可以在on-success中传递额外的参数了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue - el-upload 组件在 on-success 文件上传成功的钩子中传递更多参数](https://blog.youkuaiyun.com/Jie_1997/article/details/121833421)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [el-upload组件如何在on-success文件上传成功的钩子中传递更多参数](https://blog.youkuaiyun.com/louxinuo/article/details/120247565)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_格鲁特宝宝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值