element ui中上传文件组件时，上传的url带有动态值的参数

最新推荐文章于 2024-07-30 17:33:43 发布
最新推荐文章于 2024-07-30 17:33:43 发布
阅读量5.8k 收藏 1
点赞数
分类专栏： Vue 文章标签： Element UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaorumo/article/details/94565661
版权

最近在项目中遇到一个问题，使用element ui上传组件upload上传文件的时候，上传的接口需要带一个参数，而参数的值是动态，尝试了几种方法，这个参数的值一直都处于undefined，后来在同事小哥哥的帮助下，终于解决了这个问题：

下面说说怎么解决的这个问题。大体思路就是 监听这个参数值，一旦参数有值之后，就显示上传组件并且将url的值赋值给actionUrl 下面给部分代码就截图
在这里插入图片描述
在这里插入图片描述

鸢鸢点点
关注
专栏目录
利用th:href动态拼接参数，实现动态跳转。
m0_64589497的博客
08-21 2141
利用th:href动态拼接参数，实现动态跳转。实现数据库取网站动态跳转。
elementui动态表单实现计算属性携带参数，并将计算出的值四舍五入保留两位小数
qq_45532769的博客
08-04 1491
elementui动态表单实现计算属性携带参数，并将计算出的值四舍五入保留两位小数
【vue2+elementui】记录el-upload文件上传时调接口传参的几种情况
最新发布
bbt953的博客
07-30 371
记录el-upload文件上传时调接口传参的几种情况
elementui的NavMenu实现动态传参
m0_62434937的博客
03-02 984
路由配置 path: "/home/:id" 路径以 /home/你要传的值 通过 this.$route.params.id 获取参数 缺点：只能是字符串 问题思路解说： 本人是在使用elementui的NavMenu路由时，会有几个路由都需要跳转到同一个页面，但是不同的路由跳转过来，我需要获取不同的数据，所以使用了这种方法，如过各位大佬有更好的方法，欢迎指点。 总结：总有解决办法，就自己能否想到 ...
element-ui upload上传技巧
热门推荐
qq_37025445的博客
09-28 6万+
本文章应用场景是： 前端使用的是vue.js和element-ui。 上传是包含在一个表单里面，使用element-ui的upload上传组件，想实现的是在我点击上传选择文件后不让它自动提交，而是在我点击确定后，经过一系列的验证再提交。而且element-ui的upload组件上传的路径跟表单保存的路径是不一样的。具体看代码。  <!-- 新增弹窗--> &lt...
vue.js element-ui动态改变组件placeholder的值
幼儿园老大的博客
08-21 1万+
element-ui根据条件动态改变组件placeholder的值 假设有一个需求，一个下拉框select，如果无选项，则显示 暂无可用VPC，请先申请，如果有选项， 则显示 请选择 利用vue.js 的v-bind属性，将placeholder绑定一个动态参数，如下： :placeholder="vpcPlaceholder" 该动态参数通过某个条件计算而来，因此将该参数写...
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
10-18
在实现图片预览功能时，需要注意的是，如果上传列表项已经有子元素，并且子元素不是`IMG`标签，那么需要向该列表项中添加新的`IMG`元素，并设置其`src`属性为当前上传文件的`url`属性值。这样做是为了在页面上展示...
vue中使用axios 结合element-ui 上传组件,上传文件
weixin_44514665的博客
08-10 2458
vue中使用axios 结合element-ui 山川组件,上传文件 最近接到一个需求,需要做一个上传文件和下载文件的功能,主要使用的场景是用户上传文件,和下载样例文件,上传和下载的请求都需要带上 请求头 token,主要使用:axios,element的上传组件进行自定义上传;主要操作代码如下: 上传文件 <el-upload class="upload-demo" ref="uploadFilder" :action="up
vue+element UI upload 上传组件使用经验分享
小陈的博客
06-18 4539
用 vue+element UI 框架开发前端项目时，产品功能要求可以上传图像和文件，这就可以用到 el-upload 上传组件。在用此组件实现功能时，从陌生到熟悉，掌握了一些方法，仅以此文做一个总结梳理。 关于 upload 上传 element 的官网就一句话介绍：通过点击或者拖拽上传文件。它的基础代码如下： 我们看 element 官网详细的说明，可以发现 el-upload 的触发事件和属性特别多，action, on-priview, on-remove, before-remove, on-ex
element的上传如何获取路径_element中文件上传
weixin_39628268的博客
12-19 2932
vue+element 文件操作作者：一粒尘土 时间：2019-3-17 注：以下操作针对 vue-cli目录使用使用npm安装Element-ui 依赖$ npm i element-ui -S配置vue中的 main.js 文件中添加如下代码import ElementUI from 'element-ui' // 引入elementimport 'element-ui/lib/theme...
Vue - 详细下载/上传文件实时监听上传进度功能效果，支持 “多文件“ 同时上传下载及监听进度并自动计算进度条（支持搭配 Element UI / Ant Design Vue 等任意进度条组件）
王佳斌
01-24 3648
vue2，axios，element，ant design，监听上传下载进度，vue2下载上传进度条，vue多文件监听上传下载进度，请求监听进度条，实时监听上传数据进度，如何知道上传文件到服务器时的实时进度，axios多个文件怎么拿到onUploadProgress各自的实时进度，vue搭配element实现上传进度条，vue文件上传到服务器展示进度条功能，axios多文件上传监听进度条，多个文件同时上传怎么监听各自独立的进度，多个附件文件列表怎么单独显示各自的进度条，多文件同时下载上传监听进度条，vue2
element ui 文件上传需要带参数时
Raken12的博客
05-06 433
element ui 文件上传 & this.$set 在写上传文件这个功能时，按照饿了么的写法，发现如果需要带参数，这样有问题的，于是开始找百度，果然给我找到了,:action值可以为一个函数，于是尝试了一下 <el-upload class="upload-demo" :action="getActionUrl()" :on-success="uploadSuccess" :on-error="uploadFail" :on-change="handleChang
【Vue】element 组件 el-upload 动态绑定上传地址 action
_修铁路的、的博客
02-24 3225
el-upload 动态设置上传路径 action
element-ui Upload上传组件 动态配置action
zk_1325572803的博客
02-18 7526
<el-upload class="upload-file" ref="upload" :limit="currentTableData.length" :headers="upload.headers" :action="upload.newurl" :on-exceed="handleExceed" :before-remove="beforeRemove" :before-upload="handleFileBefore" :auto-upl
vue+element-ui 动态加载本地图片
weixin_45552104的博客
08-01 2018
vue
VUE远程下载功能，动态赋值路径URL（el-link的使用）
测试领域专家，多领域测试技术、管理、工具都略懂，略懂一二
04-19 1万+
之前我们学过下载功能， 我们下载使用 <el-link :download="downloadname" :href="downloadUrl2" id="moban2" class="downloadBtn2" type="primary"> <el-button id="dibu_download" type="primary" @click="pullLog()" plain >拉取</el-button> </el-link>
element upload 上传文件报错status of undefined
Lynn
11-19 4239
upload 上传报错 场景再现：点击编辑数据，修改上传文件，确定提交修改，关闭弹窗，清空数据和清空附件。 错误提示：上传报错，下图； Uncaught TypeError: Cannot set property ‘status’ of undefined 报错原因：设置了:file-list=“fileList”，filelist为只读，修改后就会报错 Cannot set property ‘status’ of undefined 解决方法：在成功回调中用setTimeout清空上传列表即可解决
ElementUI 原生方法添加参数
qq_36525300的博客
10-14 2135
ElementUI 原生方法添加参数 ElementUI 源代码中的方法入参是固定的，在多选框过滤方法中，默认参数是 val 和 item，不够满足需求。 想要动态添加方法入参，可以这样传递: :filter-method="(val, item) => {return dataFilter(val, item, tableData[scope.$index])}" <el-select v-model="tableData[scope.$index].value"
Vue Element ui Upload组件在上传文件时，动态切换 action上传路径
学而不思则罔,思而不学则殆
06-29 6160
Upload ，动态切换 action上传路径。
element-ui 上传文件的组件
08-26
Element UI 提供了一个上传文件的组件，可以方便地实现文件上传功能。该组件的名称是 `el-upload`。 你可以使用以下代码来创建一个基本的文件上传组件： ```html action="/upload" :on-success="handle...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值