關於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之后，問題就解決了