質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

MAMP

Mac 上で WordPress などの動的ページのサイトが作れるように環境を構築するフリーソフト

Q&A

解決済

1回答

1634閲覧

PHP、laravelで画像投稿機能の実装をしたい

ishidakouiki

総合スコア72

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

MAMP

Mac 上で WordPress などの動的ページのサイトが作れるように環境を構築するフリーソフト

0グッド

0クリップ

投稿2021/12/24 12:35

前提・実現したいこと

バイク販売の掲示板サイトを作成していて、複数枚(1枚以上5枚以下)の画像の投稿機能の実装をしたいです。

発生している問題・エラーメッセージ

問題
①画像の投稿の実装をしているつもりなのですが、
ファイルを選択→投稿したら、文字が投稿されます。
(フォームリクエストを使用して実装)

質問
①投稿画面(create.blade.php)では、5つのファイル選択ボタンを設定しているのですが(最大5枚の画像を投稿したいため)、その際のマイグレーションの設定は、imageデーブルを5つ作る必要があるのでしょうか?

②また1枚は絶対投稿しないといけないが最大5枚までの投稿とバリデーションをかけたいのですが、その際もPostRequest.phpにimageを5つ記述してその都度バリデーションの指定をしないといけないのでしょうか?

③投稿画面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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー


この一行だけで複数のファイルをアップロードできます。

HTML

1<input type="file" class="form-control" placeholder="" name="attachment[]" multiple value="" >
  1. multipleがついてるのでファイルを複数選択できる。
  2. nameに[]がついてることでバックエンドでアップロードしたファイルを配列として得ることができます。

ただし、アップロード後ファイルの添削、ファイルのプレビュー(イメージの場合)など行いたい場合はDropzone.jsなどのライブラリーを使って実装することをお勧めします。

データベースでは、5つカラム設定する必要はありません。1対多で複数のモデルを一つのモデルに関連することができます。

②バリデーションではattachment[]は配列であるため、minで最低1枚の制限を設定できて、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
skys215

総合スコア910

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ishidakouiki

2021/12/25 09:46

丁寧なご回答ありがとうございます。 ご指摘いただいた通りの記述を行なったのですが、 問題 ①投稿画面(create.blade.php)で 試しにファイルMacの写真の中の画像を選択→.jpeg(画像) 投稿したのですが、 ・attachmentには画像ファイルを指定してください。 ・attachmentにはjpeg, png, jpg, gifタイプのファイルを指定してください。 ・attachmentにはファイルを指定してください。 とエラーが表示されます。 バリデーションがかからない画像を選択しているつもりなのですが、 問題等ありますでしょうか? 投稿機能のバリデーション 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', 'attachment' =>'required|image|mimes:jpeg,png,jpg,gif|file|min:1|max:5', 'explanation' => 'string|required|max:500', ]; } } です。 質問 ①投稿画面のhtmlの記述が、ご指摘いただいた、 <input type="file" class="form-control" placeholder="" name="attachment[]" multiple value="" > と記述するなら、 データベースのテーブルは、attachmentでテーブルを作成する必要がある。 この認識で間違いないでしょうか? ②投稿内容を表示させる画面、index.blade.phpでの記述内容なのですが、 @foreach($post->images as $image) <img src="{{ $image->url }}"/> @endforecah (imagesテーブルにurlカラムにファイルのURLが保存している場合) とご指摘いただいているのですが、 iphoneの写真から主に投稿する場合の記述方法も、 @foreach($post->images as $image) <img src="{{ $image->url }}"/> @endforecah で良いのでしょうか? ご回答の程宜しくお願いいたします。
skys215

2021/12/25 12:55

①いや、inputのnameはテーブルとは関係ありません。どの名前でもよろしいです。 ②どの端末から写真を投稿するかは関係ありません。ウェブページに画像を表示させたいのなら<img>要素を使ってください。PCから投稿するのか、スマホから投稿するかは関係ありません。
skys215

2021/12/25 12:59

'attachment' => 'required|min:1|max:5', 'attachment.*' => 'required|image|mimes:jpeg,png,jpg,gif|file' だと思います。 試したことないので確実には言えません。
ishidakouiki

2021/12/26 01:14

①、②の返信。 かしこまりました。 ありがとうございます。 ①'attachment.*' => 'required|image|mimes:jpeg,png,jpg,gif|file' のバリデーションをかけたときは、 写真を投稿→~省略.jpeg の名前の写真、の場合は ・attachmentには画像ファイルを指定してください。 ・attachmentにはjpeg, png, jpg, gifタイプのファイルを指定してください。 とエラーが表示され、 ②attachment' => 'required|min:1|max:5', のバリデーションをかけた時は、 Array to string conversionとエラーが表示される状態です。 ①の場合は、 mimes:jpeg,png,jpg,gif=ファイルが、jpeg、png、jpg、gifでないといけない。 という認識なので、省略.jpegの名前の写真を投稿した時は、 なぜバリデーションがかかるのかな?と疑問です。
skys215

2021/12/26 05:50

いや、二つバリデーションを同時に書く必要があります。 一つ目のバリデーションはファイルの個数を限定して、二つ目*がついてるのは各ファイルに対してのバリデーションです。つまり、各ファイルはjpeg,png,jpg,gifいずれどちらかの一つじゃなければいけない。 'attachment' => 'required|array|min:1|max:5', 'attachment.*' => 'required|image|mimes:jpeg,png,jpg,gif|file'
ishidakouiki

2022/01/21 14:30

返事遅れて申し訳ございません。 ご指摘いただいた通り、バリデーションを記述したのですが、 画像名が pngの場合は投稿できるが、画像が表示されない。 jpgの場合は、attachment.0には画像ファイルを指定してください。 とエラーが表示される状態です。 バリデーションか、index.blade.phpの記述方法に問題があるのでしょうか?
skys215

2022/01/23 13:22

画像が表示されないは別問題だとおもいます。 jpgのみエラーが出るのはおかしいですね
ishidakouiki

2022/01/24 06:52

かしこまりました! 長々とお付き合い頂きありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問