Axios で multipart/form-data にした PUT リクエストが失敗する際の対策

環境

• Vue.js： 2.4.3
• Laravel(API側)： 5.5

やりたいこと

非同期で画像ファイルをリクエストしたい。

前提

• API の仕様上 POST は使えないため PUT を使用する
• SPA のため非同期で通信する

事象

Axios の問題なのか、content-type を multipart/form-data にした PUT では正常にリクエストを受け取れなかった。
(正確には、リクエストの中身が空になっていた)

失敗例

failure.js

let formData = new FormData();
formData.append('picture', this.$refs.picture.files[0]);

let config = {
  headers: {
    'content-type': 'multipart/form-data',
  },
};

window.axios.put('/api/test', formData, config)
.then((response) => {
  // 成功時の処理
})
.catch((error) => {
  // 失敗時の処理
});

解決策

一旦 POST で送って、後から PUT で上書く。

成功例

success.js

let formData = new FormData();
formData.append('picture', this.$refs.picture.files[0]);

let config = {
  headers: {
    'content-type': 'multipart/form-data',
  },
};

// PUT で上書く
config.headers['X-HTTP-Method-Override'] = 'PUT';

window.axios.post('/api/test', formData, config)
.then((response) => {
  // 成功時の処理
})
.catch((error) => {
  // 失敗時の処理
});

こうすれば PUT でも画像ファイルのリクエストを受け取れた。