el-upload 自定义参数（动态渲染el-upload组件，上传成功后获取当前index，更新数据源)

最新推荐文章于 2024-05-14 14:01:55 发布
最新推荐文章于 2024-05-14 14:01:55 发布
阅读量5.2k 收藏 7
点赞数 1
分类专栏： el-upload 自定义参数 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37471721/article/details/112170876
版权

因项目需求，需要根据数据动态渲染el-upload组件，上传成功之后同步更改数据源相应位置的fileName

详见Element官方文档
在这里插入图片描述
在这里插入图片描述
打印参数val,就会看到刚刚定义的data属性，从而获得当前index
打印回调参数val,就会看到刚刚定义的data属性，从而获得当前index
拿到index，之后的数据源更新等操作就顺利搞定啦！

好记性不如烂笔记，记录问题之余希望也能帮到你欧！

孟孟~
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
element ui中el-upload上传图片时的索引(index)获取
KeLiSiTingOne的博客
12-26 1824
----index获取问题,由于是列表上传,索引必须要获取到,element里面没有不支持index获取,所以需要 改进一下方法:on-change="(file,fileList)=>{return handleChange(file,fileList, $index)}",上面用的插槽,index可以轻松获取到。2.on-success以及on-change index获取问题。-----action不管是element里面的。1.action赋值问题。
VUE 页面包含多个upload组件时,获取当前使用upload的index
晨曦的博客
03-16 2368
之前网上看到有这样的一个标题，但是没有具体说出解决的方案，昨天捣腾了半天 终于在配合接口的情况下解决了这个问题。 1、问题描叙 场景设定：在图片图片的管理后台，需要对每个投票都上传图片，且投票的选项是可以增加和删除的，这个时候使用vue的上传就没法再on-success 回调的时候知道是哪个选项的图片了。类似的场景还有很多，最近我在做的一个项目就是如此，一个广告位的默认展示图片，产品需要能够上...
element-ui el-upload 文件已经上传成功，还是提示请上传文件
最新发布
2401_84868241的博客
05-14 775
element-ui el-upload 文件已经上传成功，还是提示请上传文件
vue+el-upload多文件动态上传
ichuany的博客
10-16 1247
vue+el-upload多文件动态上传 使用场景 点击【添加/删除】，可动态增加/删除行数，并为每行上传附件，附件暂存前端，点击【上传】可以将所有附件和部分名称同时提交后台，实现表格的动态多文件上传。其中el-upload ，相关钩子函数可查看el-upload 官方文档 这里的表格行的新增是在弹框中填完再写入的，也可直接在表格中添加行，然后填写内容（template slot-scope=“scope” 注释部分代码），这里仅提供思路 代码html部分 <div class="vue-box"&
el-upload上传组件的动态添加；el-upload动态上传文件；el-upload区分文件是哪个组件上传的。
qq_49173190的博客
01-09 507
解决方法： 在模板html的时候，结合function的函数，先将遍历的 j 下标return到对应的成功方法里，然后在methods时候，在return出来的对应的方法里，通过下标 j 标识将上传成功的内容（图片名称、url、id等）存入对应的字段中。此时就遇到一个问题：因为是遍历出来的上传组件，导致上传成功:on-success、改变:on-change、删除:on-remove都是用的同样的方法，那么怎么知道刚才上传的这个文件是属于哪个组件的呢。
elementui upload组件, 从服务端获取图片数组进行显示
youwe1_的博客
08-16 393
el-upload 渲染后端返回的图片列表
elemetUi 组件--el-upload实现上传Excel文件的实例
08-29
elemetUi 组件--el-upload 实现上传Excel文件的实例 elemetUi 组件的 el-upload 是一个功能强大且灵活的上传组件，通过它我们可以轻松地实现文件上传的功能。下面我们将详细介绍如何使用 elemetUi 组件的 el-...
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
在本文中，我们将深入探讨如何在Vue.js项目中结合Element UI的`el-upload`组件实现图片的压缩功能，特别是在用户上传大尺寸图片时，确保前端能够处理并优化图片大小，减轻服务器负担。以下是一步步实现这个功能的...
vue+axios+el-upload实现文件上传（带参数）：
01-03
备注：不要自己设置请求头类型，让浏览器自己解析，如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误（415错误Unsupported Media Type）；请将此配置注释掉； async uploadFile(...
vue结合el-upload实现腾讯云视频上传功能
11-20
在本文中，我们将探讨如何利用Vue.js和Element UI的el-upload组件来实现腾讯云视频上传功能，以解决在上传大体积视频时遇到的性能和用户体验问题。首先，我们需要理解为什么选择腾讯云作为视频上传的解决方案。传统...
elementui-＞el-form中数组遍历循环做规则
weixin_42961412的博客
12-19 2574
碰到了el-form关于对象中数组的一个坑，关于el-form中数组遍历循环做规则，对象中数组，数组不止一对key, value。
element-ui使用心得之二：el-upload上传文件自定义上传参数
bc492010874的博客
08-29 4151
HTML <el-upload class="upload-demo" action="https://www.baidu.com" // url :headers="headers" // 请求头,一般填token、orgid等身份校验信息 :with-credentials="true" // 自动获取cookie :data="uploadDataReq" // url中带的参数 :before-upload="checkFil
Element ui el-upload 组件上传文件之后 file-list绑定的数据源依旧是空数组
qq_43235503的博客
05-25 4776
Element ui el-upload 组件上传文件之后 file-list绑定的数据源依旧是空数组
Vue3 - Element Plus上传组件el-upload上传多个文件时，让on-change监听事件仅执行一次并获取最终文件列表方法（开启多选文件并手动上传，拿到文件列表统一循环调用接口上传）
王佳斌
01-11 4289
vue3，element plus，Upload 上传，el-upload，文件上传组件，上传组件on-change里执行多次，取消自动上传后change重复执行问题，upload上传多个文件后导致on-change执行多次拿不到最终文件列表，Element-plus的upload组件on-change不断执行怎么办，上传多个文件多次执行调用，上传多个文件时如何只执行一次on-change方法拿到最终的文件列表，vue3 element plus上传组件开启多个上传后导致change方法执行好几次，仅调用一
el-upload上传图片参数为数组包对象
weixin_50540817的博客
04-04 623
需要imgs:[{id:'1',pic:'url1'},{id:'2',pic:'url1'},{id:'3',pic:'url1'},{pic:'url4'}...](后端返回的imgs字段会带有id,二次操作上传删除图片时，原有的带id,新增的不带id)给后端传参不要imgs:["url1","url2","url3",...]
elementUI el-upload自定义参数
热门推荐
Z姑娘早安
07-03 4万+
elementUI el-upload 上传文件 自定义参数elementUI 提供的Upload 没有自定义回调参数可以通过以下两种方式实现方法一： data传参，官网提供的data方式方法二： 很多场景下，页面使用到多个el-upload组件，这个时候element并没有提供类似this的这么个东西，钩子函数的回调里面定位不到当前组件，可以通过以下两种方式获取到当前组件。 elementUI...
element 的el-upload如何传递当前索引(:on-change事件)
qq_45284875的博客
03-05 3888
<el-upload class="upload-demo avatar-uploader" action="#" enctype="multipart/form-data" :show-file-list="false" :http...
vue使用el-upload 上传图片
YUlangML的博客
09-03 910
vue使用el-upload 上传图片
el-upload自定义上传携带参数
09-21
el-upload组件可以实现自定义上传并携带参数。根据提供的引用内容，可以看到在el-upload标签中，通过:data属性可以向后端传递参数。例如，在引用中的代码中，可以看到:data属性被设置为{'script_model':script_model}，即将script_model作为参数传递给后端。这样在后端的接口中就可以通过@RequestParam注解来获取这个参数。需要注意的是，参数的命名需要和后端接口定义的参数名一致。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值