vue表格中循环多个el-upload点击时传参

最新推荐文章于 2024-01-09 17:40:15 发布
最新推荐文章于 2024-01-09 17:40:15 发布
阅读量2.2k 收藏 5
点赞数
分类专栏： vue 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44888392/article/details/119808413
版权

在表格中循环了多个el-upload，然后点击的时候，根据当前数据的id上传文件，那么怎么获取id成了一个问题，记录一下找到解决方法

<el-upload
          style="display: inline-block;margin-right: 10px"
          action="string"
          :data="scope"
          accept=".pdf,.PDF"
          :show-file-list="false"
          :http-request=<
最低0.47元/天 解锁文章
清清楚楚的清楚
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用promise解决循环请求接口数据（for循环）&使用el-upload组件自定义上传文件
爱草莓的番茄酱的博客
07-23 2092
template部分： <el-upload multiple //可以多选文件 class="upload-demo" ref="upload" //组件名 action="fakeaction" //因为是前后端分离的上传方式，所以这里的action随便填一个 :file-list="fileList" //文件列表 :auto-.
vue使用 el-upload 上传文件附加参数
最新发布
m0_63102527的博客
04-12 1011
size=“small” type=“success” @click=“submitUpload”>上传到服务器只能上传xlsx模板文件，且不超过500kbJS代码：// 原始提交事件i++) {fd.append(‘name’, ‘文件名字’)fd.append(‘type’, ‘类型一’)},// 上传文件url:headers: {});})},
elementUI+Vue，使用ref区分不同的el-upload，清除其缓存保证能够多次上传选择文件。（多个el-upload时注意区分
weixin_43185419的博客
01-04 4295
需求：在表格中嵌套使用多个el-upload组件，可能会需要多次选择。 问题分析： 单独使用el-upload时，想要在隐藏上传列表的条件下实现多次上传，就需要在每次选中文件时清除上次选择的文件缓存。 使用this.$refs.[refname].clearFiles(); 举例： <el-upload ref="picupload" class="avatar-uploader" action="#
vue+element-ui 循环上传图片
絮落锦乡的博客
07-24 841
vue+element-ui循环上传图片。
el-upload上传组件的动态添加；el-upload动态上传文件；el-upload区分文件是哪个组件上传的。
qq_49173190的博客
01-09 486
解决方法： 在模板html的时候，结合function的函数，先将遍历的 j 下标return到对应的成功方法里，然后在methods时候，在return出来的对应的方法里，通过下标 j 标识将上传成功的内容（图片名称、url、id等）存入对应的字段中。此时就遇到一个问题：因为是遍历出来的上传组件，导致上传成功:on-success、改变:on-change、删除:on-remove都是用的同样的方法，那么怎么知道刚才上传的这个文件是属于哪个组件的呢。
vue element-ui v-for循环el-upload上传图片 动态添加、删除
weixin_46688629的博客
08-10 2544
表单元素 <el-row v-for="(v,i) in RecordOperation.imgList" :key="i"> <el-col :span='11'> <el-form-item label="图片"> <el-upload accept="image/jpeg,im.
使用el-upload组件实现递归多文件上传
u011313034的专栏
02-16 9201
使用el-upload组件实现递归多文件上传
element-ui Upload多文件一次上传，获取选择的文件的数量
weixin_42421494的博客
02-21 7231
多文件上传时，不需要手动点击和分次上传；一次性上传所有选择的文件
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
在本篇文章中，我们将详细探讨如何在vue-cli3.0环境中使用Element UI的上传组件el-upload。el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法...
vue中el-upload上传图片到七牛的示例代码
12-29
一、思路，从后台获取七牛token，上传图片到七牛，获取返回图片路径放入el-upload。 二、代码。 <el v-model=listVideoQuery.orgLogo change=orgLogoChange></el> <el span=10 class=mt10> <el-upload class=...
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
10-14
在本文中，我们将深入探讨如何在Vue.js项目中结合Element UI的`el-upload`组件实现图片的压缩功能，特别是在用户上传大尺寸图片时，确保前端能够处理并优化图片大小，减轻服务器负担。以下是一步步实现这个功能的...
el-upload 上传多个文件的技巧
qq_44716001的博客
08-18 498
【代码】el-upload 上传多个文件的技巧。
循环列表中使用ul-upload上传文件
夏夏
06-15 568
需求分析：在备案的时候需要提交材料，但是每各阶段可能需要提交的材料是变化的，为了应对这种变化，将准备资料弄成动态的， 然后申请每一项备案的时候动态加载，然后上传对应的附件。
vue+el-upload多文件动态上传
ichuany的博客
10-16 1235
vue+el-upload多文件动态上传 使用场景 点击【添加/删除】，可动态增加/删除行数，并为每行上传附件，附件暂存前端，点击【上传】可以将所有附件和部分名称同时提交后台，实现表格的动态多文件上传。其中el-upload ，相关钩子函数可查看el-upload 官方文档 这里的表格行的新增是在弹框中填完再写入的，也可直接在表格中添加行，然后填写内容（template slot-scope=“scope” 注释部分代码），这里仅提供思路 代码html部分 <div class="vue-box"&
el-upload 多文件依次上传（防抖 + 递归）
神膘护体小月半的博客
06-09 2026
el-upload 多文件依次上传（防抖 + 递归）
element中el-upload的on-change方法在上传多个文件多次调用解决方法
weixin_50808523的博客
09-23 4501
el-upload的on-change方法在上传多个文件多次调用解决方法
el-upload 组件递归实现：多文件上传
青蛙king的博客
10-22 1369
递归上传是指：你选择了n个文件点击确定后，第一个接口上传成功或者失败后，再调用第二个接口上传第二个文件，依次等待上传完所有文件，这样做法可以大大减轻服务器的压力，就是上传时间会比较长。 主要逻辑如下：①、首先需要先取消组件的自动上传操作，把属性auto-upload的值设置为false，就禁用了文件的自动上传功能了，把自动转化为手动，之所以选择多个文件会并行调用上传接口，就是这个属性导致的。②、属性auto-upload设置为false之后，action的属性就失效了，只会触发change事件、上传失败on
vue中el-upload的action怎么传参
05-10
`el-upload` 组件的 `action` 属性用于指定上传文件的 URL 地址，可以通过在 URL 中添加参数的方式传递参数。 例如，如果要传递一个名为 `userId` 的参数，可以将 `action` 属性设置为一个 URL，如下所示： ```html <el-upload action="/upload?userId=123" :data="{foo: 'bar'}" > <!-- 其他内容 --> </el-upload> ``` 在服务器端接收到请求时，可以从 URL 参数中获取 `userId` 参数的值。 另外，`el-upload` 组件还提供了一个 `data` 属性，用于传递其他的表单数据。例如，如果还需要传递一个名为 `token` 的参数，可以将 `data` 属性设置为一个对象，如下所示： ```html <el-upload action="/upload" :data="{userId: 123, token: 'abc'}" > <!-- 其他内容 --> </el-upload> ``` 在服务器端接收到请求时，可以从请求的表单数据中获取 `userId` 和 `token` 参数的值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值