Laravelで画像を保存 / 取得する

Laravelで画像の保存 / 取得を実装する

記事内容

Laravelではデータベースを使って、画像の保存/取得などを実装できます。
今回は画像の保存から表示まで実装していきます。

開発環境

やろうとしていること

1. ビューでformを作り、画像をアップロード。
2. Controllerで画像を保存。
3. 保存した画像を取得。
4. 画像をビューで表示。

画像のアップロード

ビューで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) }}" />

これで画像の保存から表示まで実装できました。