問題
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)
})
}
参考
感想
自己解決能力が上がってきていてうれしいです。