Nuxt.jsとLaravelで開発中のアプリの管理画面でオブジェクトのデータと画像ファイルの更新機能を作ろうとした際にdataが送れずに困ったので備忘録を残しておきます。
失敗例
const form = ref({
email: '',
name: '',
})
const file = ref(null)
const submit = async () => {
let formData = new FormData()
let config = {
headers: {
'content-type': 'multipart/form-data',
},
}
let data = JSON.stringify(form.value)
formData.append('data', data)
formData.append('file ', form.value)
axios
.put(`/api/user/${route.value.params.id}`, formData, config)
.then((res) => {
console.log(res.data)
})
}
//laravel
public function store(Request $request)
{
$data = $request->all();
$items= json_decode($data['data']);
dd($items);
// null
}
最初JSON文字列に変換する方法が間違っているのかと考えていたのですが、どうやらAxios の仕様なのか、content-type を multipart/form-data にした PUT ではリクエストが空になってしまうようです。
https://qiita.com/komatzz/items/21b58c92e14d2868ac8e
解決策
リンクの記事にも書いてある通りいったんPOST の形式で送って中身をPUTに書き換えることで値を受け取ることができました。
const form = ref({
email: '',
name: '',
})
const file = ref(null)
const submit = async () => {
let formData = new FormData()
let config = {
headers: {
'content-type': 'multipart/form-data',
'X-HTTP-Method-Override': 'PUT', // PUTに置き換える記述を書く
},
}
let data = JSON.stringify(form.value)
formData.append('data', data)
formData.append('file ', form.value)
axios
.post(`/api/user/${route.value.params.id}`, formData, config)
.then((res) => {
console.log(res.data)
})
//laravel
public function store(Request $request)
{
$data = $request->all();
$items= json_decode($data['data']);
dd($items);
// ['email' => '', 'name' => '']
}