Vue - el-upload 组件在 on-success 文件上传成功的钩子中传递更多参数

ElementUI Upload 上传官网:https://element.eleme.cn/#/zh-CN/component/upload

ElementUI官网中upload组件的on-success的钩子中,只能传递 response, file, fileList 这三个参数,如果想要传递更多的参数该怎么解决?

解决方法:

on-success 绑定一个定义在 methods 中的方法,调用一个匿名函数,将需要用到的信息参数传递进去。然后在匿名函数内部中,再通过返回值调用一个函数的形式,将信息参数传递过去。

<el-table-column
  label="附件"
  align="center"
  show-overflow-tooltip
>
  <template slot-scope="scope">
    <el-upload
      :action="baseUrl"
      :headers="config"
      :file-list="fileList"
      :on-success="
        (response, file, fileList) => {
          return handleSuccess(response, file, fileList, scope.row);
        }
      "
    >
      <el-button type="text">点击上传</el-button>
    </el-upload>
  </template>
</el-table-column>

// 文件上传成功时的钩子
handleSuccess(response, file, fileList, rowInfo) {
  console.log(response, file, fileList, rowInfo);
},

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在ElementUI的upload组件on-success钩子,只能传递response、file和fileList这三个参数。如果想要传递多的参数,可以通过使用匿名函数来实现。在匿名函数,可以调用自定义的函数,并将额外的参数作为参数传递给该函数。例如,在el-uploadon-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.csdn.net/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.csdn.net/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 ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值