1.需求
? ? ? ? vue項(xiàng)目中拌屏，通過axios或者二次封裝的axios上傳文件（圖片被廓，文檔蛛枚，工作表等）谅海。后臺接收FormData類型的數(shù)據(jù)。現(xiàn)在的項(xiàng)目一般來說后臺接收數(shù)據(jù)為JSON字符串蹦浦，接收文件為FormData表單扭吁。
2.分析
? ? ? ? 一般來說，項(xiàng)目都會對axios進(jìn)行二次封裝盲镶。直接使用axios侥袜，或者自己二次封裝axios的情況，應(yīng)該對請求的各種配置比較清楚了溉贿。對axios和網(wǎng)絡(luò)協(xié)議理解不充分并?直接使用其他人二次封裝的axios 時(shí)多會對此有疑問枫吧，或者在上傳文件時(shí)遇到障礙。因?yàn)槎畏庋b的axios中的一些前置配置影響到了表單形式的提交宇色。
3.解決方案
? ? ? ? 先說下以表單形式發(fā)送的一些前置設(shè)置九杂。
? ? ? ? 一般我們首先需要一個(gè)表單標(biāo)簽，和input標(biāo)簽宣蠕。這個(gè)表單標(biāo)簽的主要作用呢就是生成FormData類型的數(shù)據(jù)例隆。一般我們有自己的上傳文件按鈕和預(yù)覽文件盒子，所以我把原始input[type='file']隱藏了抢蚀。注意：表單提交形式需要寫好對應(yīng)的name镀层，作為后臺讀數(shù)據(jù)時(shí)鍵值對的鍵。
? ? ? ? js內(nèi)把數(shù)據(jù)存為表單形式思币，將表單的Dom作為參數(shù)傳入new FormData（）中即可獲得表單類型的數(shù)據(jù)鹿响。我們直接把這個(gè)FormData型的數(shù)據(jù)傳遞給后臺即可。注意：FormData不能做JSON字符串轉(zhuǎn)換谷饿。下圖中的config是指請求頭headers的設(shè)置惶我。
? ? ? ? 按理來說FormData數(shù)據(jù)正確，headers設(shè)置'Content-Type':'multipart/form-data'就可以正確傳遞了博投。這是最表面的設(shè)置也是最基本的設(shè)置绸贡，但是有些同志設(shè)置后還是不好用。那么我就要再強(qiáng)調(diào)一次，需要寫好對應(yīng)的name听怕，F(xiàn)ormData不能做JSON字符串轉(zhuǎn)換.? 寫好name這個(gè)大家因該都理解捧挺，也是比較低級的錯(cuò)誤。那我為什么要強(qiáng)調(diào)不能做字符串轉(zhuǎn)換呢尿瞭。一個(gè)原因是在后臺在接收其他數(shù)據(jù)多為JSON字符串闽烙，另一個(gè)原因就是二次封裝的axios可能包含了前置操作（字符串轉(zhuǎn)換）。
????????如圖3声搁，紅框內(nèi)就是對傳遞的參數(shù)做前置操作（JSON字符串轉(zhuǎn)換）黑竞。使用二次封裝的axios時(shí)一定要查看是否有如上的代碼，被這里代碼做JSON字符串轉(zhuǎn)換后疏旨，就會導(dǎo)致FormData無法正常提交很魂。
? ? ? ? 解決方案：1.不使用二次封裝的axios，直接使用原型axios檐涝。
? ? ? ? ? ? ? ? ? ? ? ? ? 2.修改二次封裝的axios遏匆，添加提交表單類型的情況處理。
ps.我二次封裝過一個(gè)axios谁榜，包含了傳遞JSON幅聘，F(xiàn)ormData，以及接收Blob的情況窃植。
? ? 詳情可以閱讀我的相關(guān)文章 axios二次封裝
? ? ----（之后我又做了promise化的處理喊暖，更加方便了，寫這篇文章時(shí)尚未添加撕瞧。）
????或者查看我gitee上的源碼 axios.js
轉(zhuǎn)載到其他平臺需含本文的簡書鏈接
