概要
フォームで選択した画像ファイルをサーバーに保存し、画像ファイルへのパスを含むデータをデータベースに登録する手順を整理する。
- アップロード画像処理～準備
- 画像ファイルの入力
- アップロード画像ファイルの保存・登録
- アップロード画像の表示
- アップロード画像の変更・削除
要点は以下のとおり。
- フォームリクエストからアップロード画像を取得
- 画像を公開エリアに保存し、パスを取得
- 画像へのパスをデータベースに登録
一般的なアップロードファイルの保存方法についてはこちらを参照。
画像ファイル保存・登録後の画像の表示についてはこちらを参照。また、保存済みの画像ファイルの変更・削除についてはこちらを参照。
コントローラー～store
フォームで画像選択後にsubmitボタンを押すと、POSTメソッドでコントローラーのstoreアクションへルーティングされる。storeアクションでの処理は以下のとおり。
- フォームリクエストから画像ファイルのインスタンスを取得
- 一時保存領域に保存されたファイル本体を、
store()メソッドで公開領域に保存 store()メソッドの戻り値として返される、画像ファイルへのパスを取得Itemsデータの他の項目とともに、ファイルへのパスをデータベースへ登録
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
class ItemController extends Controller { ........ public function store(ItemRequest $request) { // アップロードされたファイルの取得 $image = $request->file('image'); // ファイルの保存とパスの取得 $path = isset($image) ? $image->store('items', 'public') : ''; // 商品をデータベースに登録 Item::create([ 'name' => $request->name, 'price' => $request->price, 'image' => $path, ]); return redirect()->route('items.index'); } ........ } |
ここでは、store()の第1引数と第2引数を指定し、publicディスク内のitemsディレクトリー下にファイルを保存している。
publicディスクは環境設定でstorage/app/publicが充てられる- ファイルの実体は
storage/app/public/itemsディレクトリー下に保存される。
データ登録確認
indexページで新規データを登録した結果を、MySQLのコンソールで確認した例。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
mysql> select * from items\G *************************** 1. row *************************** id: 1 name: item1 price: 100 image: created_at: 2021-10-27 10:00:51 updated_at: 2021-10-27 10:00:51 *************************** 2. row *************************** id: 2 name: 商品2 price: 250 image: items/KeeAWS296C5TPymJm8BwmzJbAcsEb2jqONOUZXcZ.jpg created_at: 2021-10-27 10:01:03 updated_at: 2021-10-27 10:01:19 2 rows in set (0.00 sec) |
画像ファイルはファイル名にランダム文字列が与えられ、publicディスク下のitemsディレクトリー内に保存される。imageカラムにitemsディレクトリー以下のパスが登録されている。
publicディスクが充てられているstorage/app/publicディレクトリーを確認すると、itemsディレクトリー内に上記のファイルが保存されているのが確認できる。
|
1 2 3 |
$ ls storage/app/public/items/ KeeAWS296C5TPymJm8BwmzJbAcsEb2jqONOUZXcZ.jpg no_image.png |
no_image.pngは、画像が登録されていない場合に表示するプレースホルダー画像。