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

問題

Vue.jsからputでFormDataを送った際に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 HeadersのContent-Typeはmultipart/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で投稿

感想

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