31
19

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 3 years have passed since last update.

LaravelでVue.jsからのFormData(multipart/form-data)のPUTを受け取れるようにする

Last updated at Posted at 2019-11-21

問題

Vue.jsからputFormDataを送った際にLaravelで$request->all()が空となってしまいました。

Vue.jsのコード

.js
edit () {
  const formData = new FormData()
  formData.appned('photo', this.photo)

  axios.put(`/api/photos/${this.$route.params.photoId}`, formData)
   .then(res => {
     console.log(res)
   })
   .catch(err => {
     console.log(err)
   })
}

Request HeadersContent-Typemultipart/form-data; boundary=XXXXXのようになっています。

Laravelのコード

.php
public function update(Request $request, $id)
{
    dd($request->all());
    // []
}

$request->all()が空でした。

Laravelの問題?

issueでありました。(https://github.com/laravel/framework/issues/13457)
Laravelの問題何でしょうか?
コメントで教えていただきました。すみません。issueをちゃんと読んでいませんでした。
PHPの問題のようです。(https://github.com/laravel/framework/issues/13457#issuecomment-341973180)

対処法

axios.postとし、Request Headers'X-HTTP-Method-Override': 'PUT'と追記しました。
POSTで送ってPUTに変換すると受け取ることができました。

.js
edit () {
  const formData = new FormData()
  formData.appned('photo', this.photo)
  
  // ↓ POSTで送る
  axios.post(`/api/photos/${this.$route.params.photoId}`, formData, {
    // ↓ headersを追記
    headers: {
      'X-HTTP-Method-Override': 'PUT'
    }
  })
   .then(res => {
     console.log(res)
   })
   .catch(err => {
     console.log(err)
   })
}

参考

axiosを使ってfile属性をPUTで投稿

感想

自己解決能力が上がってきていてうれしいです。

31
19
2

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
31
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?