画像のアップロードとデータベースへの保存

画像のアップロード

formを作る

新しくviewファイルを作りformを作る。

<form action="{{route('任意のルート名')}}" method="post" enctype="multipart/form-data">
    @csrf
    <input type="file" name="sample_image" >
    <input type="submit" value="投稿">
</form>

formはenctype=“multipart/form-data”とする。multipart/form-dataはファイルの送信をするときに指定する必要がある。
enctypeは送信データのエンコードタイプを指定しており、methodがpostのときにしか使えない。
何も指定しなければapplication/x-www-form-urlencodedとなり、これは全ての文字をURLにする。
- enctypeは基本は書かずにファイルの送信をするときだけmultipart/form-dataとすればいい。
input type=“file”でファイルを選択できる。

Controllerで画像を保存する

public function store(Request $request){
  $image = $request->file('sample_image')->store('public/image');
}

contorollerで$request->file(‘name’)->store(‘任意のディレクトリ);とすることでstorage/app直下の任意のディレクトリにユニークなファイル名で保存される。
- 今回はname="sample_image"、保存するディレクトリはstorage/public/imageになる。

データベースにファイル名を保存する

「Controllerで画像を保存する」で作成したstoreの中身に追加する。


public function store(Request $request){
  $image = $request->file('sample_image')->store('public/image');

  #この下に追加する

  $image = str_replace('public/image/', '', $image);

  $image = new Image;
  $image->file = $image;

  $image->save();
}

str_replace('指定の文字列' , '置換する文字列' , '対象の文字列')で対象の文字列から指定した文字列を置換する文字列に置き換える。
- 今回は$imageに保存されているファイル名からpublic/image/という文字列を''（空文字）に置き換えている。

※今回は画像を表示するのにヘルパ関数のassetを使うことを前提にしているのでファイル名のみをデータベースに保存した。

保存した画像の表示

ファイル名をデータベースから取得する

今回はimages_table（モデルはImage）の中のfileというカラムにファイル名が入っているとする。

public function index(){
  $image = Image::all();

  return view('image.index', compact('image'));
}

viewファイルで画像を表示する

※storage/app/public配下（画像を保存した場所）はwebからのアクセスを許可しないので、データベースからファイル名を取得しても画像は表示されない。

artisanコマンドでstorage:linkとすることでstorageのファイルがpublic直下に同期される（publicの中にstorageが追加されている)。

画像が保存されている場所：storage/app/public/image
画像を取得する場所：public/storage/image

php artisan storage:link

上記のartisanコマンドを通せばpublic/storage配下に画像があるのでにassetを使ってアクセスできる。

<img src="{{asset('storage/image/'.$image->file)}}">

バージョン

php:7.3.11
Laravel:7.21.0

【Laravel】データベースを使った画像の取得と表示