Laravelで画像の保存 / 取得を実装する
記事内容
Laravelではデータベースを使って、画像の保存/取得などを実装できます。
今回は画像の保存から表示まで実装していきます。
開発環境
Laravel 8.22.1
PHP：8.0.1
MySQL：8.0.23
MacOS：11.1 ( Big Sur )
やろうとしていること
- ビューでformを作り、画像をアップロード。
- Controllerで画像を保存。
- 保存した画像を取得。
- 画像をビューで表示。
画像のアップロード
ビューでformを作る
<form action="/任意のurl" method="post" enctype='multipart/form-data'>
<input type="file" name="thumbnail" />
<button>登録</button>
{{ csrf_field() }}
</form>
type="file"とすることで、ファイルを選択できるようになります。
formタグにenctype=“multipart/form-data”を書く必要があります。
enctypeは送信データのエンコードタイプを指定しており、
multipart/form-dataは、データをマルチパートデータとして送信します。
フォーム内にファイルの送信欄を配置する場合は、上記形式を指定しておく必要があります。
また、enctype属性が記述されている場合、formのmethod属性はpostを指定しておく必要があります。
Controllerで画像を保存
public function store(Request $request)
{
$user = new User;
// name属性が'thumbnail'のinputタグをファイル形式に、画像をpublic/avatarに保存
$image_path = $request->file('thumbnail')->store('public/avatar/');
// 上記処理にて保存した画像に名前を付け、userテーブルのthumbnailカラムに、格納
$user->thumbnail = basename($image_path);
$user->save();
return redirect()->route('任意のビュー');
}
\$request->file('name')->store('任意のディレクトリ');とすることでstorage/app直下の任意のディレクトリにユニークなファイル名で保存されます。
画像は、storage/app直下のpublic/avatarに保存されています。
今回、上記のファイル名を、\$image_pathという変数に格納しています。
そして、\$user->thumbnail = basename(\$image_path);の記述で、Userモデルのthumbnailカラムにファイル名、つまり\$image_pathを保存します。
つまりデータベースに保存するのは、画像ではなく画像に任意でつけたファイル名ということです。
※画像を表示するのにヘルパ関数のassetを使うことを前提にしているため。
Controllerで画像を取得
データベースに保存したファイル名を取得する
先ほど、users_table ( Userモデル ) のthumbnailカラムにファイル名を保存したので、そこから取得してビューへ渡します。
public function index(){
$user = User::all();
return view('任意のビュー', $user);
}
画像をビューで表示
viewファイルで画像を表示する
先ほどのControllerの記述では、画像はstorage/app/public/配下のディレクトリ (今回の場合だと"avatar" ) に保存されています。
しかし、このディレクトリはwebからのアクセスを許可しません。
そのため、データベースからファイル名を取得しても画像は表示されません。
artisanコマンドでstorage:linkとすることでstorageのファイルがpublic直下に同期されます（publicディレクトリの直下にstorageが追加されています)。
- 画像が保存されている場所：storage/app/public/avatar
- 画像を取得する場所：public/storage/avatar
public artisan storage:link
CLIで上記のコマンドを通すことで、public/storage配下に保存されている画像にアクセスできるようになりました。
あとはビューでassetを使って画像を表示します。
<img src="{{ asset('storage/avatar' . $user->thumbnail) }}" />
これで画像の保存から表示まで実装できました。