elementui 框架中的 el-upload 文件上传时携带其他的参数

2020-03-14 23:01:43 阅读：329 来源： 互联网

标签：el elementui projectId upload fd file res 参数上传

首先上图:

点击文件上传按钮，上传文件的同时，还要传递项目id 的参数 projectId。网上很多文章都是只传递 formdata 对象，而不携带其他参数，即使是这样需求，也有很多网友碰到问题，都是说要加 'Content-Type': 'multipart/form-data' 的。但是怎么携带其他参数呢？

后来看到一篇文章，原文链接：

https://blog.csdn.net/weixin_43173924/article/details/89395537

说的是其他参数携带在头部里面，然后自己改写的代码如下（完全参照文章的方法）：

//文件上传
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");
    });
}

后来发现这样还是不行，对接接口的时候依然报错。后来还是另一个前端帮我是出来的方法，代码如下：

html代码：

<el-upload
    :multiple="false"
    :show-file-list="false"
    :http-request="handleChange"
    action='string'
>
    <el-button size="medium" type="primary">上传文件</el-button>
</el-upload>

js代码：

//自己封装的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)}
    );
}

原来，forndata 对象里面也是可以额外添加其他参数的。这样就可以，上传文件成功，至于后端 java 是怎样设置的，我就不清楚了。

后记：

　　自己在项目中用 fetch 方法，碰到很多问题，有时候请求被拦截，获取不到数据，或者在控制台看不到请求的url，看不到请求的参数等等一系列的问题，后来才改用axios 了，个人感觉 axios 方法就是比 fetch 好用，至于 fetch 方法到底哪里出了问题，目前不清楚。

标签：el,elementui,projectId,upload,fd,file,res,参数,上传
来源： https://www.cnblogs.com/smile-fanyin/p/12495012.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

elementui 框架中的 el-upload 文件上传时携带其他的参数