概要
ユーザーのプロフィール画像や商品画像をアップロードし、ユーザーデータや商品データに関連付けて保存・更新・削除する。
ファイルへのパスをデータベースに保存し、ファイル本体はサーバーに保存する。
準備
仕様
全体仕様は以下の通り。
- 商品管理を扱う
- 商品データは商品名、商品価格と商品画像で、入力フォームで入力／選択
- 入力データはデータベースに保存
- DBには商品名と画像ファイルへのパスを登録
- 登録結果は
indexページで一覧表示され、そのページに入力フォームも組み込む- 画像未登録の場合はプレースホルダー画像を表示
- 各商品に商品名と画像、更新ボタン・商品削除ボタンを備える
- 更新ボタンを押すと更新ページに遷移
- 更新ページでは対象商品の商品名・現在の画像、商品名入力要素・画像選択要素、更新実行ボタンを表示
- 更新実行ボタンを押すと編集後の内容でデータを更新し、画像が選択されていれば商品画像を変更
- 商品削除ボタンを押すと画像と商品データを削除
モデルとコントローラーの作成
|
1 2 3 4 |
$ php artisan make:model Item --controller --migration Model created successfully. Created Migration: 2021_10_21_225313_create_items_table Controller created successfully. |
ルーティング
ルーティングはリソースベースとし、createとshow以外の全てを設定。
|
1 2 |
Route::resource('items', 'ItemController') ->except(['create', 'show']); |
自動設定されるルーティング。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$ php artisan route:list +--------+-----------+-------------------+---------------+---------------------------------------------+------------+ | Domain | Method | URI | Name | Action | Middleware | +--------+-----------+-------------------+---------------+---------------------------------------------+------------+ ......... | | GET|HEAD | items | items.index | App\Http\Controllers\ItemController@index | web | | | POST | items | items.store | App\Http\Controllers\ItemController@store | web | | | DELETE | items/{item} | items.destroy | App\Http\Controllers\ItemController@destroy | web | | | PUT|PATCH | items/{item} | items.update | App\Http\Controllers\ItemController@update | web | | | GET|HEAD | items/{item}/edit | items.edit | App\Http\Controllers\ItemController@edit | web | ......... +--------+-----------+-------------------+---------------+---------------------------------------------+------------+ |
マイグレーション
マイグレーションファイルの編集
商品名、価格、画像ファイルへのパスのカラムを追加し、日付は2038問題対応でdatetime型に変更。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
class CreateItemsTable extends Migration { public function up() { Schema::create('items', function (Blueprint $table) { $table->bigIncrements('id'); // 商品名 $table->string('name'); // 価格 $table->integer('price'); // 画像ファイルパス $table->string('image'); //$table->timestamps(); $table->datetime('created_at'); $table->datetime('updated_at'); }); } ........ } |
マイグレーション
マイグレーションを実行。
|
1 2 3 |
$ php artisan migrate Migrating: 2021_10_21_225313_create_items_table Migrated: 2021_10_21_225313_create_items_table (0.02 seconds) |
アップロード画像処理の実装
実装の流れ
準備ができたアプリケーションに対して、以下の順番でアップロード画像処理を実装していく。
- アップロード画像処理～準備
- 画像ファイルの入力
- アップロード画像ファイルの保存・登録
- アップロード画像の表示
- アップロード画像の変更・削除
入力・アップロード
入力・アップロードでは以下のことを整理する。
- 画像ファイルの選択を含む入力フォーム
- 画像ファイル選択要素のバリデーション
処理の流れは以下のとおり。
- 画像ファイルを選択してフォームの送信ボタンを押す
- ファイル本体がアップロードされ、サーバーの一時保存領域に保存される
- アップロードファイルのインスタンスがリクエストから取得可能となる
要点は以下の通り。
form要素のオプションにenctype="multipart/form-data"を加えるinput要素のオプションでtype="file"とする- 画像ファイルに関するバリデーションルールは、
['file', 'mimes=jpeg,jpg,png', ...]など
詳細はアップロード画像 – 入力を参照。
アップロード画像の保存・登録
アップロード画像の保存・登録では以下のことを整理する。
storeルートによるデータ保存- リクエストからの画像インスタンスの取得
- 画像ファイルの公開エリアへの保存
- 画像ファイルへのパスのデータベース登録
処理の流れは以下の通り。
- 画像ファイルのインスタンスをリクエストから取得
- たとえば
$image = $request->image
- たとえば
- 画像ファイルの保存とパスの取得
$path = $image->store('ディレクトリー', 'ディスク')- ただしフォームで画像ファイルが選択されているときだけ処理する
- 画像ファイルへのパスのデータベース登録
create([..., $image => $path, ...])
詳細はアップロード画像 – 登録・保存を参照。
アップロード画像の表示
画像の表示では以下のことを整理する。
- 画像ファイルが保存された
publicディスクのシンボリックリンクの作成 - 画像ファイルへのパスを含むデータの取得
- パスを介した画像ファイルの表示
要点は以下の通り。
- 画像ファイルを保存している
publicディスクはstorage/app/publicディレクトリーに充てられているが、Web上は非公開 - この
publicディスクへのシンボリックリンクを、アプリケーションのpublicディレクトリーに作成php artisan storage:link
- コントローラーで画像ファイルへのパスを含むデータをデータベースから取得
$items = Item::all();
- データを1つずつ取り出しながら、ビューの
img要素で画像ファイルを表示<img src="{{ \Storage::url($item->image) }}">
詳細はアップロード画像の表示を参照。
アップロード画像の変更・削除
画像の変更・削除機能では以下のことを整理する。
edit～updateルートによるデータの編集と更新destroyルートによるデータの削除- ディスクに保存された画像ファイルの削除
- データ編集と編集内容によるデータ更新
- ファイルとデータの削除
要点は以下のとおり。
- ディスクに保存されたファイルの削除方法
\Storage::disk('ディスク')->delete('ファイルパス')
詳細はアップロード画像の変更・削除を参照。