Edited at

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

More than 1 year has passed since last update.


環境


  • Vue.js: 2.4.3

  • Laravel(API側): 5.5


やりたいこと

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


前提


  • API の仕様上 POST は使えないため PUT を使用する

  • SPA のため非同期で通信する


事象

Axios の問題なのか、content-typemultipart/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 でも画像ファイルのリクエストを受け取れた。