elementui 一个页面有多个upload组件 ，共用方法时，怎么传自己的参数

最新推荐文章于 2022-07-13 16:16:47 发布
最新推荐文章于 2022-07-13 16:16:47 发布
阅读量4.5k 收藏 5
点赞数
文章标签： javascript ui 后端 ViewUI
原文链接：https://my.oschina.net/u/560237/blog/3100326
版权
chunlindian8111
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue表格中循环多个el-upload点击时传参
weixin_44888392的博客
08-19 2222
在表格中循环了多个el-upload，然后点击的时候，根据当前数据的id上传文件，那么怎么获取id成了一个问题，记录一下找到解决方法 <el-upload style="display: inline-block;margin-right: 10px" action="string" accept=".pdf,.PDF" :show-file-list="false" :http-request="(s
WebUploader 同一页面中集成 多实例，单图上传，多图上传，编辑回显，删除（包括逻辑删除，显示移除）
热门推荐
zlt尼玛银行
10-13 2万+
WebUploader同一个页面多实例上传，编辑的回显，删除
elementui的upload组件，同一个页面使用多个upload组件解决方案之一：不用封装，不用修改后端接口，不用修改源码
07-13 2545
公司项目需求： 企业的用工需求，可以新增，可以删除，也就是动态的，每一个用工需求里边都可以上传对应的合同，合同可以上传多个，可以随意增加和删除。框架直接用的 vue-element-adminelementui的upload组件功能相当强大，用起来也非常好用，但是这里遇到一个问题，就是list遍历出来的多个upload组件，怎样对应上每个item的file_list？？？直接上解决方案： 将on-remove on-change on-success 方法以闭包的形式直接写行内，return 后边调用自己
ElementUI实现el-upload多个文件上传一个接口并带入参
weixin_35549724的博客
03-06 2401
如图片，在点击提交申请时一个接口上传多个附件并附带说明参数。 <el-upload class="upload" ref="upload" :data="submitData" action="/dsp/mdm/modelapply/upload" ...
element开发 - 多个upload组件绑定同一函数的解决方法
PrisonersDilemma的博客
03-11 1075
参考网上大神，终于可以少写几个函数了。涉及到闭包。 html： <el-form :model="form" label-width="160px"> <el-form-item label="商品封面" style="height: 90px;"> <el-upload :action="uploadUrl"...
element-ui上传图片坑
meng2lin的博客
04-09 745
今天遇到一个问题，浪费了半天时间才解决出来 <el-upload name="image" action="http://test.shapping.com/index/image/upload" list-type="picture-card" :with-credentials='true' :on-preview="handlePict...
单页面设置多个上传组件
zhang_zan
03-08 456
<el-form-item label="背景图："> <el-upload class="avatar-uploader" action="" :show-file-list="false" list-type="picture" :http-request="Upload" :...
layui一个页面使用多个文件upload上传按钮
09-02
layui一个页面使用多个文件upload上传按钮
iview Upload组件多个文件上传的示例代码
10-17
iView Upload组件是一个强大的文件上传工具，支持多种上传模式，包括自动上传和手动上传。在此示例中，我们将重点关注手动上传多个文件的方法。 首先，我们需要在项目中引入iView UI库，并在HTML模板中声明Upload...
基于vue-upload-component封装一个图片上传组件的示例
01-19
业务要求，需要一个图片上传控件，需满足 多图上传 点击预览 图片前端压缩 支持初始化数据 相关功能及资源分析 基本功能 先到https://www.npmjs.com/search?q=vue+upload上搜索有关上传的控件，没有完全满足...
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
10-18
今天小编就为大家分享一篇vue2.0 使用element-ui里的upload组件实现图片预览效果方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-upload上传组件的动态添加；el-upload动态上传文件；el-upload区分文件是哪个组件上传的。
i_am_a_div的博客
07-01 3635
el-upload上传组件的动态添加；el-upload动态上传文件；el-upload区分文件是哪个组件上传的。
vue + element-ui（el-upload）（多个el-upload组件 通过接口循环出来的）+ 阿里云 ali-oss 上传文件
c327127960的博客
12-28 2291
最近有个需求 需要上传文件至 ali-oss 并且是多个el-upload 组件 通过接口循环出来的 并在点击提交按钮的同时将所有上传的文件统一上传至阿里云 效果展示 项目的框架是vue 选择的方案是 element-ui（el-upload）也就是饿了么ui框架里的 upload组件 就按照官方文档一步步来 安装ali-oss npm install ali-oss 引入 ali-oss import OSS from "ali-oss"; 初始化 OSS 对象 stsToken 此属性我没
element-ui中upload组件多个无法获取对应的值
weixin_34234823的博客
08-07 662
2019独角兽企业重金招聘Python工程师标准>>> ...
页面中使用多个element-ui upload上传组件时绑定对应元素
weixin_34191845的博客
08-14 1308
elemet-ui里提供的upload文件上传组件,功能很强大,能满足单独使用的需求,但是有时候会存在多次复用上传组件的需求,如下图的样子,这时候就出现了问题,页面上有多个上传组件时,要怎么操作呢? 之前在网上找到了一位大神的方法,修改源码,在回调函数中多加一个参数,但是这种方法在多人开发时不太适用,因为这要求所有人都要修改源码,这里附上大神的方法,大家可以酌情使用 首先在你下...
前端-实现多个el-upload操作及其回显
m0_51706962的博客
02-20 3443
翻阅了大量关于el-upload相关的资料，发现还没实现多个el-upload上传的文章
VUE 页面包含多个upload组件时,获取当前使用upload的index
晨曦的博客
03-16 2359
之前网上看到有这样的一个标题，但是没有具体说出解决的方案，昨天捣腾了半天 终于在配合接口的情况下解决了这个问题。 1、问题描叙 场景设定：在图片图片的管理后台，需要对每个投票都上传图片，且投票的选项是可以增加和删除的，这个时候使用vue的上传就没法再on-success 回调的时候知道是哪个选项的图片了。类似的场景还有很多，最近我在做的一个项目就是如此，一个广告位的默认展示图片，产品需要能够上...
element 使用多个upload组件，绑定元素
qq_36249659的博客
07-10 2567
<el-form-item :label="item.tip" :prop="item.tip" v-if="item.htmlType==1"> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" ...
关于element-ui并列几个el-upload并排的问题
sxs_smile的博客
02-26 5426
遇到一个贼麻烦的客户，就不停的给你加需求。然后就出现一个订单要完成需要导3次的问题。然后element-ui一直困扰我的就是这个el-upload的布局问题，一个如果一个upload里边有几个button，不管slot="trigger"的button在第几位一定就排到第一位了，另一个就是他的自动换行。 再界面本来就很拥挤的情况下，我必须得把三个upload放到一行，但是用个div包起来几个upl...
请帮我写一个使用elementui upload的上传组件
最新发布
07-13
当然可以帮你写一个使用 ElementUI Upload 组件的上传组件。以下是一个简单的示例： 首先，你需要在你的项目中安装并引入 ElementUI： ```bash npm install element-ui ``` ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 接下来，你可以创建一个 Vue 组件来包含你的上传组件： ```vue <template> <div> <el-upload class="upload-demo" action="/your-upload-url" :headers="{'Authorization': 'your-token'}" :on-success="handleSuccess" :on-error="handleError" :before-upload="beforeUpload" > <el-button slot="trigger" size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload> </div> </template> <script> export default { methods: { beforeUpload(file) { const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; const isLt500kb = file.size / 1024 < 500; if (!isJPG) { this.$message.error('只能上传jpg/png文件'); } if (!isLt500kb) { this.$message.error('文件大小不能超过500KB'); } return isJPG && isLt500kb; }, handleSuccess(response, file) { // 上传成功后的处理逻辑 console.log(response); }, handleError(error, file) { // 上传失败后的处理逻辑 console.log(error); }, }, }; </script> <style scoped> .upload-demo { display: inline-block; } </style> ``` 在这个示例中，我们使用了 ElementUI 的 Upload 组件，设置了上传的 URL、请求头、文件类型和大小限制，并定义了上传成功和失败的回调函数。 你可以根据你的实际需求修改这个示例，并适配到你的项目中。希望对你有所帮助！如果有任何问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值