關於vue+axios上傳文件的踩坑分析

上傳文件是每一個前端開發者都會遇到的問題，在以前實習期作了一個上傳文件的功能，當時沒有完全搞明白問題所在，如今從新覆盤下。

1.使用formData來上傳文件，沒有使用axios上傳文件，以前在學校有作過。生成一個formData對象

let formData = new FormData() formData.append('xxx', 'yyyyy')

經過dom操做得到input中file[0],而後append給formData對象，網上有詳細的api

2.在使用axios以後發先我以前用的方法後臺接受不到文件，問題是content-type是application/json，上傳文件的時候使用的content-type應該是multipart/form-data纔對。看了網上的一些理解，好像是說這個conten-type會在咱們上傳文件的時候自動變爲multipart/form-data，可是爲何個人是json呢。問題的關鍵在axios身上

axios.interceptors.request.use( request => { store.dispatch('httpStatus', { status: '', statusMsg: '' }) return request }, error => { return Promise.reject(error) } )

axios對咱們的request作了一個攔截而後從新返回，這個時候咱們的formData會被變爲一個Object，瀏覽器給出的是application/json，因此咱們的操做失敗了

3.如何解決這個問題呢？

　　3.1咱們在咱們的action.js中修改axios的配置 

let config = { headers: { 'Content-Type': 'multipart/form-data' } }

結果固然仍是不行，怎麼會這麼容易就讓我搞定呢！！！，後臺報錯 ---no multipart boundary was found，就是一個二級制的分隔符不見了，咱們能夠手動添加一個

let config = { headers: { 'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime() } }

能夠了，可是我仍是以爲不是很好，應該咱們改動了headers裏的東西，因而乎又看了我導師和網上的方法，一塊兒貼出來。

　　3.2 建立新的axios實例，掛在在vue原型上

　　具體參考這篇文章https://www.jianshu.com/p/1405f389fb1d

　　3.3 我導師給的方案，在action.js，axios的第三個參數config，加入一個transformRequest

let config = { headers: { 'Content-Type': 'multipart/form-data' }, transformRequest: [function (data) { return data }] }

關於這個方法我查瞭如下api，他是說 transformRequest 容許在向服務器發送前，修改請求數據，這個回調中能夠對data進行修改，這樣設置 config以後，問題就解決了