好久沒寫筆記了，來一波今天晚上遇到的坑===>>>關(guān)于我們后端給我的上傳?execl文件接口 上傳需要的參數(shù) 就這一個 但是有個很坑的問題是，

實例1

我們后端竟然自定義 參數(shù)名了，之前默認ken值是file 我們對接的也一直都是 file這個ken值襟铭，但是這次竟然 自定義 我去 我去 我去，妹的劝贸，因為自定義的關(guān)系 用 new?FormData();（不太理解的可以去看一下官方解釋?FormData）的時候 默認的 append就要 自定義第一個參數(shù)了姨谷，fordata.append("excel",?fileObj,?fileObj[0].name) ;那么一個致命的問題來了 我用PostMan是可以提交成功的 但是 用 vue 內(nèi)嵌 的axios就一直是 上傳的一個空文件 逗宁，看到這個 返回值 我剛開始還以為自己寫法有問題，然后就是 走向未知時間的 自檢之路梦湘，但是我重新測試了2個小時瞎颗，一直都是同一個返回，我崩潰了捌议，然后我就看看網(wǎng)上有沒有大神遇到這種奇葩問題哼拔，F(xiàn)ormData()方法竟然失效了，找來找去基本都是一樣瓣颅，都是用 new 一個FormData()的實例 用append寫入文件對象的倦逐，我又仔仔細細的看了一下官方的注釋，果然 我想到了一個投機取巧的方法下面貼圖

實例2

實際代碼

實際的上傳代碼就這么多宫补，提前聲明 headers 因為請求的 協(xié)議頭的 請求參數(shù)類型 Content-Type 是?multipart/form-data 這個要提前聲明然后就是 用 js代碼creat一個 file類型的 input 文件選擇框檬姥，之后 拿到文件類型就在? input的實例?files 字段里面曾我，之后就是 核心 請求后端之前 需要提前把 請求參數(shù) 轉(zhuǎn)義為 ForData對象 但是我一直就卡在這里，然后我就是 多添加轉(zhuǎn)義了一次Blob(Blol的官方文檔)對象才成功提交成功了健民，原因我也不太請求 官方說的是 (FormData對象的字段類型可以是?Blob,?File, 或者 string:?如果它的字段類型不是Blob也不是File抒巢，則會被轉(zhuǎn)換成字符串類)。 我感覺問題就出在這里秉犹，如果直接上傳用ForData文件蛉谜，瀏覽器默認解析為字符串 因為之前 的結(jié)果就是上傳的是一個空對象，那么 我強制轉(zhuǎn)義為Blob對象 然后在轉(zhuǎn)義 為file 作為?FormData?這樣才會被瀏覽器 上傳的是一個文件崇堵，對應(yīng)的key值也是 自定義的ken了

下面貼的是代碼

$(".ss").click(()?=>?{????????????

var?requestConfig?=?{? ? ? ? ? ? ? ?

headers:?{? ? ? ? ? ? ? ? ? ??

"Content-Type":?"multipart/form-data",???????????????

?}????????????

};???????????

?var?input?=?document.createElement("input");?

?input.type?=?"file";??

input.click();????????????var?fileObj?=?{}???????????

?input.onchange?=?function?(res)?{????????????????

//?_this.subFiles(input.files);????????????????

fileObj?=?input.files????????????????

console.log('輸出測試的內(nèi)容:',?fileObj);???????????????

?var?fordata?=?new?FormData();?//?FormData?對象????????????????

var?blob?=?new?Blob([fileObj[0]]);? ? ? ? ? ? ? ??

fordata.append("excel",?blob,?fileObj[0].name)???????????????

?var?url?=?""????????????????

axios.post(url, fordata,?requestConfig).then(function?(res)?{????????????????????????

console.log("輸出測試的內(nèi)容:",?res.data);???????????????????

?}).catch(function?(error)?{????????????????????????

console.log("失敗信息:",?error);????????????????????

});????????????

}????????

})