Q&A
前提・実現したいこと
バイク販売の掲示板サイトを作成していて、複数枚(１枚以上5枚以下）の画像の投稿機能の実装をしたいです。
発生している問題・エラーメッセージ
問題
①画像の投稿の実装をしているつもりなのですが、
ファイルを選択→投稿したら、文字が投稿されます。
（フォームリクエストを使用して実装）
質問
①投稿画面(create.blade.php)では、5つのファイル選択ボタンを設定しているのですが（最大5枚の画像を投稿したいため）、その際のマイグレーションの設定は、imageデーブルを5つ作る必要があるのでしょうか?
②また１枚は絶対投稿しないといけないが最大5枚までの投稿とバリデーションをかけたいのですが、その際もPostRequest.phpにimageを５つ記述してその都度バリデーションの指定をしないといけないのでしょうか？
③投稿画面index.blade.phpに1枚以上5枚以下の画像を投稿するには、
foreachで{{ $post->explanation }}←画像を呼び出してくる記述を回したら良いのでしょうか？
該当のソースコード
create.blade.php（投稿画面）
@extends('layouts.app') @section('content') <div class="panel-body"> <div class="d-flex flex-column align-items-center mt-5"> <div class="col-xl-7 col-lg-8 col-md-10 col-sm-11 post-card"> @include('commons.error_messages') <div class="card"> <div class="card-header"> 出品作成 </div> <div class="card-body"> <form class="upload" id="new_post" enctype="multipart/form-data" action="{{ route('post.store') }}" accept-charset="UTF-8" method="POST"> @method('POST') {{csrf_field()}} <div class="md-form"> <input class="form-control" placeholder="車両名" name="name" value=""/> </div> <div class="md-form"> <input class="form-control" placeholder="年式" name="year" value=""/> </div> <div class="md-form"> <input class="form-control" placeholder="価格" name="price" value=""/> </div> <div class="md-form"> <input class="form-control" type="file" placeholder="" name="image" accept="image/*" multiple value="" > <input type="file" multiple="multiple" class="form-control" placeholder="" name="attachment[]" multiple value="" > <input type="file" multiple="multiple" class="form-control" placeholder="" name="attachment[]" multiple value="" > <input type="file" multiple="multiple" class="form-control" placeholder="" name="attachment[]" multiple value="" > <input type="file" multiple="multiple" class="form-control" placeholder="" name="attachment[]" multiple value="" > </div> <div class="form-group"> <textarea name="explanation" class="form-control" rows="10" placeholder="説明"></textarea> </div> <div class="text-center"> <input type="submit" name="commit" value="出品する" class="btn btn-primary w-25" data-disable-with="投稿する"/> </div> </form> </div> </div> </div> </div> @endsection ``` index.blade.php（投稿した内容が表示される画面） ```ここに言語を入力 @extends('layouts.app') @section('content') <div class="col-md-8 col-md-2 mx-auto"> エラー表示 </div> @foreach ($posts as $post) <div class="col-md-8 col-md-2 mx-auto"> <div class="card-wrap"> <div class="card mt-3"> <div class="card-header align-items-center d-flex"> <a class="no-text-decoration" href=""> <i class="fas fa-user-circle fa-2x mr-1"></i> </a> <a class="black-color" title="" href=""> <strong> 出品者 </strong> </a> </div> <div class="card-body"> <div class="post_edit text-right"> <a class="btn btn-primary btn-sm" href=""><i class="far fa-edit"></i>編集 </a> <a class="btn btn-danger btn-sm" rel="nofollow" href=""><i class="far fa-trash-alt"></i>削除 </a> </div> <h3 class="h5 title"> {{ $post->name }} </h3> <div class="mb-5"> {{ $post->year }} </div> <div class="mb-5"> {{ $post->price }} </div> <div class="mb-5"> {{ $post->image }} </div> <div class="mb-5"> {{ $post->explanation }} </div> <section> @endforeach @endsection ``` web.php ```ここに言語を入力 Route::get('/', 'PostsController@index')->middleware('auth')->name('index'); Route::get('bike/new','PostsController@index')->name('post.index');//バイク販売ページ表示// Route::get('post/new','PostsController@create')->name('post.create');//バイク投稿ページ表示// Route::post('/','PostsController@store')->name('post.store');//バイク投稿機能// ``` PostsController.php ```ここに言語を入力 <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Http\Requests\PostRequest; use App\Post; class PostsController extends Controller { public function index() { $posts = Post::orderBy('created_at', 'desc')->get(); return view('posts.index', ['posts' => $posts]); } public function create() { return view('posts.create'); } public function store(PostRequest $request) { $post = new Post; $post->name = $request->name; $post->year = $request->year; $post->price = $request->price; $post->image = $request->image; $post->explanation = $request->explanation; $post->user_id = \Auth::id(); $post->save(); return redirect()->route('index'); } } ``` PostRequest.php ```ここに言語を入力 <?php namespace App\Http\Requests; use Illuminate\Foundation\Http\FormRequest; class PostRequest extends FormRequest { /** * Determine if the user is authorized to make this request. * * @return bool */ public function authorize() { return true; } /** * Get the validation rules that apply to the request. * * @return array */ public function rules() { return [ 'name' =>'string|required|max:30', 'year' =>'string|required|max:30', 'price' =>'string|required|max:10', 'image' =>'required|image|mimes:jpeg,png,jpg,gif|file', 'explanation' => 'string|required|max:500', ]; } } ``` create_posts_table.php ```ここに言語を入力 <?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreatePostsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('posts', function (Blueprint $table) { $table->bigIncrements('id'); $table->unsignedBigInteger('user_id'); $table->string('name', 30); $table->string('year', 30); $table->string('price',10); $table->string('image',5)->nullable()->change(); $table->string('explanation',500); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('posts'); } } ``` ### 補足情報（FW/ツールのバージョンなど） php＝7.3 laravel=5.8 MAMP
回答1件
0
ベストアンサー
①
この一行だけで複数のファイルをアップロードできます。
HTML
1<input type="file" class="form-control" placeholder="" name="attachment[]" multiple value="" >
- multipleがついてるのでファイルを複数選択できる。
- nameに[]がついてることでバックエンドでアップロードしたファイルを配列として得ることができます。
ただし、アップロード後ファイルの添削、ファイルのプレビュー（イメージの場合）など行いたい場合はDropzone.jsなどのライブラリーを使って実装することをお勧めします。
データベースでは、５つカラム設定する必要はありません。１対多で複数のモデルを一つのモデルに関連することができます。
②バリデーションではattachment[]は配列であるため、minで最低１枚の制限を設定できて、maxで最大5枚まで投稿できる制限を設定できます。
③普段投稿したイメージの内容はデータベースに保存しません。保存するのはファイルのパスです。
なのでそのままイメージを表示することはできません。<img>要素を用いて表示します。
もし上記のリレーションを使えばこんな感じです：
PHP
1@foreach($post->images as $image) 2<img src="{{ $image->url }}"/> 3@endforecah
(imagesテーブルにurlカラムにファイルのURLが保存している場合)
投稿2021/12/25 05:03
編集2021/12/25 05:28
総合スコア910
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/12/25 09:46
2021/12/25 12:55
2021/12/25 12:59
2021/12/26 01:14
2021/12/26 05:50
2022/01/21 14:30
2022/01/23 13:22
2022/01/24 06:52