Laravel ローカルに画像をアップロードし表示する

目次

• Macのローカルで作成したLaravelアプリで画像ファイルをアプリのローカルにアップロードし当該画像を表示する方法をまとめる

実施環境

• ハードウェア環境

項目	情報
OS	macOS Catalina(10.15.5)
ハードウェア	MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports)
プロセッサ	2 GHz クアッドコアIntel Core i5
メモリ	32 GB 3733 MHz LPDDR4
グラフィックス	Intel Iris Plus Graphics 1536 MB

• ソフトウェア環境

項目	情報	備考
PHP バージョン	7.4.8	Homebrewを用いてこちらの方法で導入→Mac HomebrewでPHPをインストールする
Laravel バージョン	6.X	commposerを用いてこちらの方法で導入→Mac Laravelの環境構築を行う
MySQLバージョン	8.0.19 for osx10.13 on x86_64	Homwbrewを用いてこちらの方法で導入→Mac HomebrewでMySQLをインストールする

前提条件

• 下記記事の作業が実行できていること
  • Laravel ローカルに画像をアップロードするアプリを作成する

前提情報

• 本記事はMacのローカルで作成されたLaravelアプリからアプリ名ディレクトリ/storage/app/public/imagesにファイルをアップロードする機能を作る。
• アプリ名ディレクトリ/storage/app/public/imagesにアップロードされたファイルを表示するページと画像の詳細ページと画像表示ページを作成する。下記に作成するページのURLを記載する。（画像表示ページとは画像をブラウザ内の全画面で表示するページのことを指す）
  • 一覧ページののURL/output
  • 詳細ページのURL/detail/imagesテーブルのid
  • 表示ページのURL/display/imagesテーブルのid
• 本記事の作業完了したソースは下記にアップしてある。
  • https://github.com/miriwo0104/laravel6_image/tree/image_display_local/master

概要

1. ルーティングファイルの記載
2. コントローラファイルの記載
3. ビューファイルの作成と記載
4. 確認

詳細

• 下記の説明で実行するコマンドはすべてMacのローカルのターミナルで実行するものとし、実行場所はアプリ名ディレクトリであるlaravel6_imageディレクトリとする。

1. ルーティングファイルの記載（本作業完了後のソースコードはこちら→https://github.com/miriwo0104/laravel6_image/tree/image_display_local/01_route）

   1. 下記コマンドを実行してルーティングファイルを開く。

      $ vi routes/web.php
      

   2. 下記のルーティング情報を記載する。

      laravel6_image/routes/web.php

      // 画像一覧ページ用
      Route::get('/output', 'ImageController@output')->name('output');
      
      // 画像詳細ページ用
      Route::get('/detail/{images_id}', 'ImageController@detail')->name('detail');
      
      // 画像表示ページ用
      Route::get('/display/{image_id}', 'ImageController@display')->name('display');
      

   3. 記載後のルーティングファイルの全内容を下記に記載する。

      laravel6_image/routes/web.php

      <?php
      
      /*
      |--------------------------------------------------------------------------
      | Web Routes
      |--------------------------------------------------------------------------
      |
      | Here is where you can register web routes for your application. These
      | routes are loaded by the RouteServiceProvider within a group which
      | contains the "web" middleware group. Now create something great!
      |
      */
      
      Route::get('/', function () {
          return view('welcome');
      });
      // 画像アップロードページ用
      Route::get('/input', 'ImageController@input')->name('input');
      
      // 画像アップロード処理用
      Route::post('/upload', 'ImageController@upload')->name('upload');
      
      // 下記を追記する
      // 画像一覧ページ用
      Route::get('/output', 'ImageController@output')->name('output');
      
      // 画像詳細ページ用
      Route::get('/detail/{images_id}', 'ImageController@detail')->name('detail');
      
      // 画像表示ページ用
      Route::get('/display/{image_id}', 'ImageController@display')->name('display');
      // 上記までを追記する
      

2. コントローラファイルの記載（本作業完了後のソースコードはこちら→https://github.com/miriwo0104/laravel6_image/tree/image_display_local/02_controller）

   1. 下記コマンドを実行して作成したコントローラファイルを開く。

      $ vi app/Http/Controllers/ImageController.php 
      

   2. 下記のようにコントローラファイルの内容を追記修正する。追記修正後のコントローラファイルの全体の内容を下記に記載する。

      laravel6_image/app/Http/Controllers/ImageController.php

      <?php
      
      namespace App\Http\Controllers;
      
      use Illuminate\Http\Request;
      use App\Models\Image;
      use Illuminate\Support\Facades\Storage;
      
      class ImageController extends Controller
      {
          public function input()
          {
              return view('images/input');
          }
      
          public function upload(Request $request)
          {
      
              $this->validate($request, [
                  'file' => [
                      // 空でないこと
                      'required',
                      // アップロードされたファイルであること
                      'file',
                      // 画像ファイルであること
                      'image',
                      // MIMEタイプを指定
                      'mimes:jpeg,png',
                  ]
              ]);
      
              if ($request->file('file')->isValid([])) {
              
                  $file_name = $request->file('file')->getClientOriginalName(); // オリジナルファイルのファイル名の取得
                  $file_path = Storage::putFile('/images', $request->file('file'), 'public'); // ファイルのアップロードとアップロードパスの取得
      
                  $image_info = new Image();
                  $image_info->file_path = $file_path;
                  $image_info->file_name = $file_name;
                  $image_info->save();
      
                  return redirect('/');
              }else{
                  return redirect(route('input'));
              }
      
          }
      
          // 下記を追記する
          public function output()
          {
              $image_infos = Image::select('*')->get();
              return view('images.output', ['image_infos' => $image_infos]);
          }
      
          public function detail($image_id)
          {
              $image_info = Image::find($image_id);
              return view('images.detail', ['image_info' => $image_info]);
          }
      
          public function display($image_id)
          {
              $image_info = Image::find($image_id);
              return view('images.display', ['image_info' => $image_info]);
          }
          // 上記までを追記する
      }
      

3. ビューファイルの作成と記載（本作業完了後のソースコードはこちら→https://github.com/miriwo0104/laravel6_image/tree/image_display_local/03_view）

   1. 下記コマンドを実行してビューファイルを作成して開く。

      $ vi resources/views/images/output.blade.php
      

   2. 下記の内容をビューファイルに記載する。

      laravel6_image/resources/views/images/output.blade.php

      <h1>アップロードされた画像一覧</h1>
      
      @foreach ($image_infos as $image_info)
          <hr>
          <img src="{{asset('storage/' . $image_info['file_path'])}}" alt="{{asset('storage/' . $image_info['file_path'])}}">
          <br>
          <a href="{{route('detail', ['images_id' => $image_info['id']])}}">
              <button type="submit">詳細</button>
          </a>
          <br>
          <a href="{{route('display', ['images_id' => $image_info['id']])}}">
              <button type="submit">表示</button>
          </a>
      @endforeach
      

   3. 下記コマンドを実行してビューファイルを作成して開く。

      $ vi resources/views/images/detail.blade.php
      

   4. 下記の内容をビューファイルに記載する。

      laravel6_image/resources/views/images/detail.blade.php

      <h1>画像の詳細</h1>
      
      <img src="{{asset('storage/' . $image_info['file_path'])}}" alt="{{asset('storage/' . $image_info['file_path'])}}">
      <br>
      <a href="{{route('display', ['images_id' => $image_info['id']])}}">
          <button type="submit">表示</button>
      </a>
      <ul>
          <li>ID: {{$image_info['id']}}</li>
          <li>アップロード日: {{$image_info['created_at']}}</li>
      </ul>
      

4. 確認

   1. 下記コマンドを実行してローカルサーバを起動する。

      $ php artisan serve 
      

   2. 下記にアクセスする。

      • http://127.0.0.1:8000/output

   3. 登録してある画像が表示されることを確認する。

      

   4. 画像下部の「詳細」をクリックする。

      

   5. 画像の詳細情報が表示されることを確認する。

      

   6. 画像下部の「表示」をクリックする。

      

   7. 画像のみがブラウザで表示されることを確認する。

      

参考文献

• LaravelでStorageを使ったファイルおよびディレクトリの操作をまとめてみた
• https://readouble.com/laravel/6.x/ja/filesystem.html
• Laravel 6.x ファイルストレージ