25
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-11-16

環境

  • 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 でも画像ファイルのリクエストを受け取れた。

25
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?