使用element-ui中的el-upload组件时携带其他参数

解决方法:
// template

复制代码
 1 <el-upload
 2   action="/api/oss/file/add"
 3   :headers="headers" // 如果头部需要传token
 4   multiple
 5   :limit="1" // 限制文件个数
 6   :before-upload="handleBefore"
 7   :on-success="handleSuccess"
 8   :data="pdfData"
 9   accept=".pdf" // 限制文件格式>
10   <el-button size="small" type="primary">上传PDF</el-button>
11 </el-upload>
复制代码

 


// js:

复制代码
 1   pdfData: {
 2     '参数1': '',
 3     '参数2': '',
 4     '参数3': ''
 5   },
 6   headers: {
 7     Authorization: Cookies.get('token') 
 8     //从cookie里获取token,并赋值 Authorization ,而不是token
 9   }
10 // 上传前的回调函数
11   handleBefore(file) {
12     const _vm = this;
13     _vm.pdfData.参数1 = '值1';    
14     _vm.pdfData.参数2 = '值2';    
15     _vm.pdfData.参数3 = '值3';    
16   }
17 // 上传成功回调
18   handleSuccess(res) {
19     const _vm = this;
20     if (res.status == 200) {
21       _vm.$message({
22         message: 'Success!',
23         type: 'success'
24       })
25     } else {
26       _vm.$message({
27         message: 'Upload Error!',
28         type: 'error'
29       })
30     }
31   }
复制代码

 

 

posted @   zaijinyang  阅读(12003)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示