laravel8で画像掲示板を作ってみる。

admin

3年前

参考URL
https://qiita.com/miriwo/items/450f28be3a34366f9940
https://qiita.com/miriwo/items/d5df8a688e8a1f2b2a2c

1, 画像用コントローラーやモデルを作る

php artisan make:model Image -a

1	php artisan make:model Image -a

2, アップロードされたファイルを管理するためのテーブルを設計する
database/migrations/xxxxxxxx_create_images_table.php (最初にモデルを作る時に-aオプションで同時に作られた)

    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('user_id')->nullable()->comment('アップロードしたユーザ');            
            $table->string('file_comment')->nullable()->comment('アップロードファイルの1行コメント');
            $table->string('file_path')->comment('アップロードされたファイルのパス');
            $table->string('file_name')->comment('ハッシュ化される前のファイル名');
            $table->timestamps();
        });
    }

public function up()

{

Schema::create('images', function (Blueprint $table) {

$table->id();

$table->unsignedBigInteger('user_id')->nullable()->comment('アップロードしたユーザ');

$table->string('file_comment')->nullable()->comment('アップロードファイルの1行コメント');

$table->string('file_path')->comment('アップロードされたファイルのパス');

$table->string('file_name')->comment('ハッシュ化される前のファイル名');

$table->timestamps();

});

}

php artisan migrate:fresh でmysqlを更新しておく。

3, routes/web.phpにルーティングを記述。
laravel8では、ちょっと記述方法が変化していて、先頭にコントローラーをuseする必要がある

use App\Http\Controllers\ImageController;
// resourceでCRUD全操作をカバー
Route::resource('/image', ImageController::class);

use App\Http\Controllers\ImageController;

// resourceでCRUD全操作をカバー

Route::resource('/image', ImageController::class);

4, resources/views/image/index.blade.phpで、アップロード画面を作成する

{{-- post先はname指定。resourceで自動生成される。php artisan route:listで確認 --}}
<form action="{{route('image.store')}}" method="POST" enctype="multipart/form-data">
    @csrf
    
    <input type="file" class="form-control" name="file">
    <input type="text" name="file_comment" placeholder="1行コメント">
    <input type="submit">
</form>

{{-- post先はname指定。resourceで自動生成される。php artisan route:listで確認 --}}

@csrf

</form>

5, app/Http/Controllers/ImageController.phpを修正して、https://独自ドメイン/image で
投稿フォームが表示される事を確認する(アップロードすると一覧画面にもなる)

    public function index()
    {
        // アップロードされた画像一覧を表示する
        $images = Image::all();
        return view('image.index', compact('images'));
    }

public function index()

{

// アップロードされた画像一覧を表示する

$images = Image::all();

return view('image.index', compact('images'));

}

6, postされたファイルをWebサーバに保存して、DBにもファイル名とパスを保存する。

    public function store(Request $request)
    {
        if ($request->file('file')) {
            $this->validate($request, [
                'file' => [
                    // 空でないこと
                    'required',
                    // アップロードされたファイルであること
                    'file',
                    // 画像ファイルであること
                    'image',
                    // MIMEタイプを指定
                    'mimes:jpeg,png',
                ]
            ]);

            if ($request->file('file')->isValid([])) {
                // ファイルそのものはWebサーバに保存
                $file_name = $request->file('file')->getClientOriginalName();
                //$file_path = Storage::putFile('/uploads', $request->file('file'), 'public');                 
                $upload_image = $request->file('file');
                $file_path = $upload_image->store('uploads',"public");

                // ファイル名とパスは、DBに保存する。
                $image_info = new Image();
                $image_info->file_name = $file_name;
                $image_info->file_path = $file_path;
                $image_info->file_comment = $request->input('file_comment');
                
                $image_info->save();
            }
        }
        // 前の画面に戻る
        return back();
    }

public function store(Request $request)

{

if ($request->file('file')) {

$this->validate($request, [

'file' => [

// 空でないこと

'required',

// アップロードされたファイルであること

'file',

// 画像ファイルであること

'image',

// MIMEタイプを指定

'mimes:jpeg,png',

]

]);

if ($request->file('file')->isValid([])) {

// ファイルそのものはWebサーバに保存

$file_name = $request->file('file')->getClientOriginalName();

//$file_path = Storage::putFile('/uploads', $request->file('file'), 'public');

$upload_image = $request->file('file');

$file_path = $upload_image->store('uploads',"public");

// ファイル名とパスは、DBに保存する。

$image_info = new Image();

$image_info->file_name = $file_name;

$image_info->file_path = $file_path;

$image_info->file_comment = $request->input('file_comment');

$image_info->save();

}

// 前の画面に戻る

return back();

}

7, アップロードされた画像一覧を表示する

# /public内にシンボリックリンクstorage(/storage/app/publicへのリンク)が作られる
php artisan storage:link

1 2	# /public内にシンボリックリンクstorage(/storage/app/publicへのリンク)が作られる php artisan storage:link

8, アップロードされた画像一覧を表示する部分を作る。
resources/views/image/index.blade.php

@foreach($images as $image)
  <div>
    <p>{{$image->created_at}} {{$image->file_comment}}</p>
    <a href="storage/{{$image->file_path}}" target=blank>
        <img src="storage/{{$image->file_path}}" width="240" alt="" title="">
    </a>
  </div>  
@endforeach

@foreach($images as $image)

<div>

<p>{{$image->created_at}} {{$image->file_comment}}</p>

<a href="storage/{{$image->file_path}}" target=blank>

<img src="storage/{{$image->file_path}}" width="240" alt="" title="">

</a>

</div>

@endforeach

一応、これで最低限の機能は実装できた！
写真選択＆コメントテキストでアップロードして、一覧表示する。

関連記事