Laravelで画像をUPLOADして、表示させる方法を紹介します。
今回は、POSTで画像をUploadしていきます。
・画像のUpload方法
・画像の表示方法
を紹介していきます。
画像をUploadするための流れを解説
・formを利用して、画像をUpload
・UploadするファイルのPathをデータベースへ保存
formを利用して、画像をUpload
まずは、formを利用して画像をUploadします。
formで、Uploadされた画像は、storageの配下にUPされます。
View____________________
<form method="POST" action="/imageUpload" enctype="multipart/form-data">
{{ csrf_field() }}
<input type="file" id="file" name="profile" class="form">
<button type="submit">アップロード</button>
</form>
ポイント；
・input type=”file”
・enctype=”multipart/form-data
ファイルアップロードをする場合input要素はを使い、その親のform要素には以下のようにenctype=”multipart/form-data”と書く必要があります。
ROUTE____________________
Route::post('/imageUpload', 'mypageContactController@imageUpload')
ポイント；
・formのactionが、postで指定するアクション内容となる。
UploadするファイルのPathをデータベースへ保存
Uploadされた画像を呼び出すために、Uploadする画像のPath名称を設定して、そのPathをデータベースに登録する必要があります。
$file_name = time() . '.' . request()->file->getClientOriginalName();
// fileの名称を決定します。
// Uniqueになっていることが重要なので、time()を接頭に追記
$request->file('file')->storeAs('public',$file_name);
// storageは以下のpublicディレクションに、 $file_name で保存
//ここからは、データベースにファイルがUpされているPathを保存
$imagepath = '/storage/' . $file_name;
$loginId = Auth::id();
$profileInfo = User::find($loginId);
//Modelを活用
$profileInfo->imagepath = $imagepath;
// imagepathをデータベースへ保存
$profileInfo->save();
return redirect()->action(
'mypageContactController@profile'
);
パス名が public/xxxxxxxxxx.jpg となるので不要な public/ の部分を削除しています。
画像を表示するための流れを解説
・シンボリックリンクの作成
・<img src=”path名称”>に、pathを代入する
シンボリックリンクの作成
Laravelは、publicディレクトリ配下に存在するファイルしか、表示することができません。しかし、アップロードしたファイルは/storage/appの下にあるためアクセスすることができません。
/publicディレクトリと/storage/appディレクトリとの間でリンクを持たせる必要があります。
それを実行してくれるのが、シンボリックリンクです。
やり方は、いたってシンプルです。
コマンドで下記を実行してください。
$ php artisan storage:link
画像を表示させる<img src=”path名称”>に、pathを代入する
あとは、画像を表示させたい場所で、保存したPathを呼び出してあげればよいです。上記で、App\Model\User {{ imagepath }} のカラムへ、Pathをデータベースへ保存しました。
Viewで下記を呼び出してあげればOKです。
※ただし、Viewで呼び出すために、Controllerから、profileInfo（Userのデータ）をView側へcompactで送ってあげることが前提です。
@if(isset( $profileInfo->imagepath ))
<img src="{{$profileInfo->imagepath}}">
@else
@endif