Vue

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

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

目次

  1. 結論
  2. 全体のコード
  3. フォームリクエストでバリデーションする
  4. 関連記事
  5. まとめ
オススメ本
WEB+DB PRESS Vol.136
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう！！
リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

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 から頂ければ幸いです。

それでは！