斉藤 貞義 
プロミディア合同会社の斉藤です。
Laravelを使って画像ファイルをアップロードするサンプルプログラムを作成しました。
今回は処理のポイントについて解説していきます。
また、完成したソースコードも私のGitHub上にアップロードしてありますので、よかったらダウンロードして動かしてみてください。
画像ファイルをアップロードするサンプルプログラムの概要
２画面構成で、トップページで画像を表示し、画像登録用の画面で画像を登録します。
トップページ
画像登録ページ
Laravelを使って画像ファイルをアップロードするポイント
Laravelを使って画像ファイルをアップロードするポイントは保存と読み出しの２つあります。
下記のポイントさえ押さえておけば、実装自体は簡単です。
保存
・アップロードされた画像ファイルは「storage/app/public」フォルダに格納します。
・ファイル名は自動でランダムな名称が付与されます。
・データベースには生成されたファイル名のみを保存します。（パスは保存しない）
読み出し
・viewで画像ファイルへのパスを生成する際、Laravelのassetの命令を使ってパスを補完します。
・storageフォルダは外部から参照できないので、publicフォルダへシンボリックリンクを貼ります。
サンプルコードの解説
実際のコードの書き方について解説します。
画像ファイルのアップロード
画像ファイルを選択するブラウザ側はfileコントロールを使ってPOSTするだけです。
resources/views/item/create.blade.php
|
1 2 3 4 5 6 7 |
<h1>画像登録画面</h1> <form action="{{ url('create') }}" method="POST" enctype="multipart/form-data"> {{ csrf_field() }} <input type="file" class="form-control" name="image_file"> <hr> <button class="btn btn-success">登録</button> </form> |
ファイルアップロードの記述
csrfの記述がないとエラーになります。
{{ csrf_field() }}
画像ファイルの保存
リクエストで送られてきたファイルの処理方法は以下の通りです。
app/Http/Controllers/ItemController.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
public function create(Request $request) { if ($request->isMethod('POST')) { $path = $request->file('image_file')->store('public/img'); Item::create(['file_name' => basename($path)]); return redirect('/')->with(['success'=> 'ファイルを保存しました']); } // GET return view('item.create'); } |
アップロードされたファイルをsotreメソッド使って保存します。
その際、パスの指定は「public/img」と指定してください。これで「storage/app/public/img」下にランダムなファイル名で保存されます。
次にデータベースにはファイル名のみ保存します。
$pathの中身はファイルのパスも含まれていますので、basenameメソッドを使ってファイル名のみ保存します。
画像ファイルの読み出し
まず、Laravelの公式サイトにも記載されている通り、シンボリックリンクを貼ります。
プロジェクトフォルダ直下で以下のコマンドを実行してください。
php artisan storage:link
そうすると「public」以下にstorageフォルダが現れます。ただ、これは実体ではなくて、ショートカットです。
実体は「storage/app/public」フォルダです。
ここに保存されたファイルをブラウザ側から参照するには、bladeファイルに以下のように書くと表示できます。
※$item->file_nameはファイル名です。
<img src=”{{ asset(‘/storage/img/’.$item->file_name) }}”>
まとめ
Laravelで画像ファイルをアップロードする方法は、わかってしまえば簡単ですが、初めてだとそこそこハマると思います。
特にパスの関係がややこしいですね。
今回作成したサンプルプログラムは下記公式サイトのやり方を参考にしています。
公式サイト：Laravel 5.5 ファイルストレージ
ファイル周りのことをきちんと知りたければこちらの書籍がおすすめです。
2019年7月に発売された書籍でファイルの扱いについてもきちんと解説されています。
今回紹介したサンプルプログラムはこちらにアップしてあります。
Amazon S3の使い方も解説しています。
[st-card id=2420 label=”” name=”” bgcolor=”” color=”” readmore=”on”]