這兩天遇到一個(gè)奇葩的問題，項(xiàng)目中利用axios插件實(shí)現(xiàn)圖片上傳骂铁，其中axios插件已經(jīng)封裝成獨(dú)立的文件睛竣，上傳文件利用 new FormData進(jìn)行提交，提交過程一波三折柠新，坑之大窍荧，坡之陡足足浪費(fèi)了我一天的時(shí)間終于搞好了。
一恨憎、先來說說坑是怎么挖的
１ 說說上傳遇到的問題。這里利用FromData對(duì)象進(jìn)行上傳钥组，都知道要設(shè)置headers中的content-type為multipart/form-data茉贡，結(jié)果在封裝了配置了headers參數(shù)之后，請(qǐng)求頭出現(xiàn)如下的樣子：
經(jīng)過往上百度者铜、谷歌等等一切方法腔丧，還是沒有解決放椰。因?yàn)檎?qǐng)求頭中沒有boundry，有一篇博客說自行設(shè)置boundry愉粤。boundry是一個(gè)瀏覽器隨機(jī)生成的一組數(shù)砾医，用來分隔FormDatad的數(shù)據(jù)。在我設(shè)置之后變成了這樣衣厘。
這里雖然形式正確如蚜，但還是上傳失敗。到這里已經(jīng)半天過去了影暴，此刻的內(nèi)心崩潰到極點(diǎn)了错邦。不行，在從官方文檔開始型宙。又回到了官方文檔撬呢。
二、如釋重負(fù)
網(wǎng)上找不到解決的辦法妆兑，但給提供了一條思路魂拦，就是axios攔截了請(qǐng)求，對(duì)請(qǐng)求的數(shù)據(jù)做了一些處理搁嗓，而FormData傳輸文件不需要任何的處理芯勘。所以就在想直接在axios上過載一個(gè)方法，躲過axios的攔截腺逛。憑著這個(gè)思路荷愕，又去看文檔，發(fā)現(xiàn)文檔中有一個(gè)創(chuàng)建實(shí)例(Creating an instance)的方法? axios.create([config]) 然后創(chuàng)建實(shí)例棍矛，過載Vue原型上安疗，最終解決。到這里長(zhǎng)舒一口氣茄靠。
這里就上傳成功脐雪。趕緊抬起頭吸了一口新鮮空氣。
