Vue
VueとLaravelでFormDataで配列をPOST(送信)する方法
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
オススメ本
Vue と Laravel で画像を送信する時には FormData を使いますが、その時一緒に配列を送信したい時に一工夫が必要なので記事にしました。
そのときのバリデーション方法も書きました
結論
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 から頂ければ幸いです。
それでは!