vue+elementui el-upload 上传文件时携带其他的参数

Posted 2021-03-05 smile-fanyin

首先上图:

 

 点击文件上传按钮，上传文件的同时，还要传递 项目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 方法到底哪里出了问题，目前不清楚。