7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-02-14

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

記事内容

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

開発環境

Laravel 8.22.1 PHP:8.0.1 MySQL:8.0.23 MacOS:11.1 ( Big Sur )

やろうとしていること

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

画像のアップロード

ビューでformを作る

○○.blade.php
<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で画像を保存

○○Controller.php
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カラムにファイル名を保存したので、そこから取得してビューへ渡します。
○○Controller.php
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を使って画像を表示します。

○○.blade.php
<img src="{{ asset('storage/avatar' . $user->thumbnail) }}" />


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

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?