Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@miriwo(大川 峻)inBOOM TECH CAFE

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

Last updated at Posted at 2020-11-07

目次

  • 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をインストールする

前提条件

前提情報

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

概要

  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. 下記にアクセスする。

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

      127_0_0_1_8000_output.png

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

      127_0_0_1_8000_output-2.png

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

      127_0_0_1_8000_detail_1.png

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

      127_0_0_1_8000_output-3.png

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

      1__882×782_.png

参考文献

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?