vue+elementui el-upload 上传文件时携带其他的参数
2021-04-06 14:25
标签：需求 ima lis nbsp href callback console let form 首先上图: 点击文件上传按钮，上传文件的同时，还要传递 项目id 的参数 projectId。网上很多文章都是只传递 formdata 对象，而不携带其他参数，即使是这样需求，也有很多网友碰到问题，都是说要加 ‘Content-Type‘: ‘multipart/form-data‘ 的。但是怎么携带其他参数呢？ 后来看到一篇文章，原文链接： https://blog.csdn.net/weixin_43173924/article/details/89395537 说的是其他参数携带在头部里面，然后自己改写的代码如下（完全参照文章的方法）： 后来发现这样还是不行，对接接口的时候依然报错。后来还是另一个前端帮我试出来的方法，代码如下： html代码： js代码： 原来，forndata 对象里面也是可以额外添加其他参数的。这样就可以，上传文件成功，至于后端 java 是怎样设置的，我就不清楚了。 后记： 自己在项目中用 fetch 方法，碰到很多问题，有时候请求被拦截，获取不到数据，或者在控制台看不到请求的url，看不到请求的参数等等一系列的问题，后来才改用axios 了，个人感觉 axios 方法就是比 fetch 好用，至于 fetch 方法到底哪里出了问题，目前不清楚。 vue+elementui el-upload 上传文件时携带其他的参数 标签：需求 ima lis nbsp href callback console let form 原文地址：https://www.cnblogs.com/smile-fanyin/p/12495012.html
//文件上传
handleChange(file) {
let fd = new FormData();
fd.append(‘file‘,file.raw);//文章中取的值是 file.raw
fetch(url, {
method: ‘POST‘,
headers: {
‘Content-Type‘: ‘multipart/form-data‘,
//文章说参数放到其他地方后端拿不到，所以把参数 projectId 放在头部传递
‘projectId‘: this.projectId
},
data:fd
})
.then(res=>res.json())
.then(res=>{console.log(res)})
.catch(function(e) {
console.log("error");
});
}
el-upload
:multiple="false"
:show-file-list="false"
:http-request="handleChange"
action=‘string‘
>
el-button size="medium" type="primary">上传文件el-button>
el-upload>
//自己封装的aios方法
axiosPost(url,params,callBack){
axios.post(url, params)
.then(res=>{
callBack(res)
})
.catch(err=>{
console.log(‘error‘);
});
}
//文件上传的函数
handleChange(param) {
let fd = new FormData();
let self = this;
fd.append(‘file‘,param.file);//传文件
fd.append(‘projectId‘,self.projectId);//传projectId
ajax.axiosPost(
url, //接口地址
fd, //formdata对象参数
res => {console.log(res)}
);
}
文章标题：vue+elementui el-upload 上传文件时携带其他的参数
文章链接：http://soscw.com/index.php/essay/72071.html