前端經過axios和FormData實現文件上傳功能遇到的坑

axios文件上傳的坑

基本的axios配置這裏就不講了。首先要確認後臺的接口是否正常：用postman進行文件上傳，若是文件可以上傳成功，剩下的就是前端問題了，不然就先用postman將後臺接口測通先。很難受這篇文章的結論是：本身的代碼坑了本身

1. 文件上傳時候，服務器報500錯誤

首先確認：經過formData上傳，不用考慮enctype，axios發送請求，嗯，後臺還要是通的
正常來講文件上傳的時候，都是須要修改請求的Content-Type，修改成multipart/form-data來實現文件上傳的功能
可是如今很神奇的報了個500錯誤

看到報錯以後，上網找了一大堆資料（重複內容一大堆，還一堆沒有用的內容。。。） 仍是沒有解決問題。

1.1 網上的解決辦法

網上的一種說法：axios配置不純淨，須要本身手動建立一個axios請求。
可是建立了以後發現請求頭一直都是application/x-www-form-urlencoded（axios源碼中，若是沒有設置請求頭的時候，axios會默認設置這個Content-Type），會致使文件沒有辦法上傳，或者是上傳以後文件是null的。

1.2 更加野的辦法

在上面那個報錯的截圖中看到服務器是報沒有boundary的錯誤，查了一下資料發現這個是瀏覽器進行分割文件時須要到的分割符，野方法就是直接手動添加一個boundary在multipart/form-data的後面。可是很無奈，發現服務器換了個報錯415，顯示當前的請求爲不支持的媒體類型。

2 axios的配置

目前能夠確定報錯就是由於發送請求時候的請求頭錯誤，致使後端就收不到文件。百度到了一個很關鍵：發送文件的時候不可以手動設置multipart/form-data，須要瀏覽器來自行設置這個請求頭，

2.1 axios配置

理論上axios的配置應該沒有那麼蠢，沒有考慮到axios須要發送formData格式的內容。正好最近一直研究在axios的源碼內容，不當心被我看到了一個有趣的內容

看到沒有，在axios源碼裏面就寫着，若是當前的請求內容是formData格式時候，就將Content-Type刪除，也就是刪除掉了multipart/form-data這個請求頭。並且人家後面還寫着備註說，讓瀏覽器來繼續設置這個值。終於找到了關鍵的地方，在這個判斷前打印了一下requestData的值，結果發現是空的。繼續去查看這個requestData值的內容

找了這個對請求數據進行裝載的地方，在裝載先後打印了內容發現，裝載了以後內容都被清空了，也就致使了後面判斷是否爲一個formData對象時候直接判斷爲false就沒法刪除Conten-Type了。

這個地方就是咱們本身對發送請求時候請求數據的修改，也就影響了上面裝載數據的處理，能夠看到若是是multipart/form-data時候，數據直接就被Qs進行序列化了，由於沒法序列化FormData的內容，因此返回的data就是一個空的內容，致使最後判斷是否是formData對象時出錯

3. 解決辦法

因此最後就是由於本身坑本身，很難受