vue+elementui el-upload 上傳文件時攜帶其他的參數

首先上圖:

 

 點擊文件上傳按鈕，上傳文件的同時，還要傳遞 項目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方法（在其他js文件中封裝，然后在.vue文件中import引用，名字為ajax）
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)} ); }

 

原來，formdata 對象里面也是可以額外添加其他參數的。這樣就可以，上傳文件成功，至於后端 java 是怎樣設置的，我就不清楚了。

 

后記：

　　自己在項目中用 fetch 方法，碰到很多問題，有時候請求被攔截，獲取不到數據，或者在控制台看不到請求的url，看不到請求的參數等等一系列的問題，后來才改用axios 了，個人感覺 axios 方法就是比 fetch 好用，至於 fetch 方法到底哪里出了問題，目前不清楚。