Laravel5.7 新規画像投稿〜画像表示まで

はじめに

備忘録的視点でLaravelを使った画像投稿の方法を記述。
したいこと
→投稿するたびに、任意の画像たちが画面に出力される

準備物

DB・・・diariesテーブルとeimgカラム作成
投稿画面・・・newpost.blade.php
出力画面・・・home.blade.php
ルート・・・web.php
コントローラー・・・DiaryController.php
モデル・・・Diary.php

あと、ここには書いてないけど出力画像の大きさを指定するhome.css

実装過程

①画像投稿用のフォームを用意
②画像パスをDBへ保存
③指定した画像を任意storageフォルダに保存
④DBから画像パスを呼び出して、該当画像をstorageから出力

①画像投稿用のフォームを作成

inputタグを使って画像データを指定する。
投稿画面用にnewpost.blade.phpを作成。
newpost.blade.php

<form method="POST" action="{{ route('store') }}" enctype="multipart/form-data">
@csrf
  <div class="li-content">
     <label>新規画像</label>
     <div class="basic">
     <input type="file" name="eimg" id="eimg" placeholder="画像選択"></div>
  </div>
</form>

ポイント
1.画像データ(パス)をDB保存するのでmethodはPOST
2.routeでstoreメソッドを通って画像パスを保存する(後述)
3.ファイルを送るときのおまじない、enctype="multipart/form-data"をかく
4.inputタグにはtype="file"とname="eimg"を入れておこう(②で使う)

②画像パスをDBへ保存

DBへ画像パスを保存するには、以下の工程が必要。
web.php

Route::post('/newpost','DiaryController@store')->name('store'); //保存処理

DiaryController.php

public function store(Request $request){

        $imgPath = $this->saveImage($request->file('eimg'));

        $diary = new Diary();
        $diary->eimg = $imgPath;

        $diary->save();
        return redirect()->route('home');
    }

ポイント
1.ユーザーが任意で選択した画像パスをsaveImageメソッドの引数にいれる
→saveImageメソッドは後述
2.入れて処理したものを、$imgPathに格納

3.DBのカラムに予め用意したeimgに、$diary->save()で保存

③指定した画像を任意storageフォルダに保存

アクセス権限をprivateにしつつ、引数に$imageを入れてsaveImage関数を生成
DiaryController.php

private function saveImage($image)
    {
         // デフォルトではstorage/appに画像が保存される。
         // 第2引数にpublicをつけることで、storage/app/publicに保存される。
         // 今回は、第１引数にPictureをつけて、
         // storage/app/public/Pictureに画像が保存されるようにする。
         // ※自分で指定しない場合、ファイル名は自動で設定される。
       $imgPath = $image->store('Picture', 'public');

       return 'storage/' . $imgPath;
    }

このsaveImageメソッドが②でのユーザー画像パスと結びついて保存される。

④DBから画像パスを呼び出して、該当画像をstorageから出力

最後に画像を出力する
home.blade.php

@foreach ($diaries as $diary)
            <div class="estate-img1">
                <img src="{{ asset($diary->eimg) }}">
            </div>
@endforeach

DiaryController.php

public function home ()
    {
        $diaries = Diary::all();
        return view('home', ['diaries' => $diaries]);
    }

ポイント
1.画像を投稿するたびにその画像が画面に並んで欲しいので、foreachで回す
2.Diaryモデルをインスタンス化し、第２引数で'DBのdiariesテーブルにあるデータを$diariesに入れたよ'と宣言し、home.blade.phpを表示する

終わりに

DBに直接画像を保存することはできないので、画像のパス(住所みたいなもん)を保存してあげて、
画像のお呼び出しがあったときに、storage内の画像パスと合致したものが出力される仕組みを作ってあげる。
雑だけど、まーこんな感じ。