【Vue.js3系】FormDataで画像ファイルとオブジェクトを一緒にaxiosのPUTで送ろうとするとnullになった

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' => '']
}

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。