ホーム > Vue > VueとLaravelでFormDataで配列をPOST（送信）する方法
Vue

VueとLaravelでFormDataで配列をPOST（送信）する方法

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. 結論
  2. 全体のコード
  3. フォームリクエストでバリデーションする
  4. 関連記事
  5. まとめ
オススメ本

Vue と Laravel で画像を送信する時には FormData を使いますが、その時一緒に配列を送信したい時に一工夫が必要なので記事にしました。

そのときのバリデーション方法も書きました

⇨ Vue 記事の目次はこちら

結論

Vue 側では JSON.stringify する

formData.append("texts", JSON.stringify(this.texts))

Laravel 側では json_encode する

$texts = json_decode($request->texts);

以上です。

全体のコード

Vue

<template>
  <v-btn @click="post">テスト送信</v-btn>
</template>
<script>
export default {
    data() {
        return {
 texts: [
                {
                    name: "ぼく",
                    content: "かんぜんに理解した",
                },
                {
                    name: "ぼく②",
                    content: "きんぜんに理解した",
                },
                {
                    name: "ぼく③",
                    content: "くんぜんに理解した",
                },
                {
                    name: "ぼく④",
                    content: "けんぜんに理解した",
                },
                {
                    name: "ぼく⑤",
                    content: "こんぜんに理解した",
                },
                {
                    name: "ぼく⑥",
                    content: "かかかかかかか",
                },
            ],
        }
     },
    methods: {
        post() {
            var formData = new FormData();
            formData.append("texts", JSON.stringify(this.texts));

            //これだと配列ではなく、ただの文字列になってしまう formData.append("texts", this.texts);

            //configは画像送信する時につけるやつ
            //今回は画像はややこしいので省略
            var config = {
                header: {
                    "Content-Type": "multipart/form-data",
                },
            };
            axios
                .post("api/post", formData, config)
                .then(({ data }) => {
                    console.log(data);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    }
}

Laravel

api.php

use App\Http\Controllers\Api\PostController;
Route::post('/post',[PostController::class, 'store']);

PostController

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class PostController extends Controller
{
    public function store(Request $request)
    {
        $texts = json_decode($request->texts);
        return response()->json(compact('texts'),200);
    }
}

フォームリクエストでバリデーションする

PostRequest

    //オーバーライドする
    public function validationData()
    {
        $texts = json_decode($this->input('texts'), true);
        return $this->all() + ['array' => $texts];
    }

    //元々のデータがjsonであることを確認
    //
    public function rules()
    {
        return [
            'texts' => 'json',
            'array.*.name' => 'required|string',
            'array.*.content' => 'required|string|max:1000'
        ];
    }

PostController

    public function store(PostRequest $request)

関連記事

Laravel ＋ Vue ＋ S3 で画像の保存をする方法

まとめ

コードばかりですいません！

苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。

それでは！

フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。