[Laravel6]画像アップロード方法を懇切丁寧に解説します

ファイルのアップロード 、ブラウザからの閲覧方法の解説です。なぜ懇切丁寧かというと、ここで完全につまずいたので自分のためです。

概要

ユーザーを登録するアプリケーションで画像の登録も一緒におこないます。画像アップロード にフォーカスするので基本的なlaravelアプリケーション制作の部分は割愛します。

開発環境

PHP 7.3.8/Laravel  6.5.0 /DB:postgreSQL

データベースにはusersテーブルにnameカラムとfile_nameカラムをつくってあります。ライブラリのlaravel collectiveインストール済みです。

登録フォームの作成

ルートの設定から。

web.php

Route::resource('users','UsersController',['only'=>['index','create','store']]);

登録ページのビュー。ファイルのアップロード時は

enctype="multipart/form-data"

を忘れずにform の要素に追加しましょう。

create.blade.php

<h1>登録ページ</h1>
{!! Form::open(['route'=>'users.store','enctype'=>'multipart/form-data']) !!}
<div class='form-group'>
    {!! Form::label('name', '名前') !!}
    {!! Form::text('name',old('name'),['class'=>'form-control']) !!}
</div>
<div class='form-group'>
    {!! Form::label('file_name','プロフィール写真') !!}
    {!! Form::file('file_name') !!}
</div>
{!! Form::submit('登録する',['class'=>'btn btn-info']) !!}
{!! Form::close() !!}

アップロードしたファイルの保存

UsersController@store

public function store(Request $request)
{
    $request->validate([
        'name'=>['required','string','max:255'],
        'file_name'=>['file','mimes:jpeg,png,jpg,bmb','max:2048'],
    ]);

使えるバリデーションhttps://readouble.com/laravel/6.x/ja/validation.html

file：フィールドがアップロードに成功したファイルであることをバリデートします。

image：フィールドで指定されたファイルが画像(jpg、png、bmp、gif、svg)であることをバリデートします。

mimes：フィールドで指定されたファイルが拡張子のリストの中のMIMEタイプのどれかと一致することをバリデートします。

登録されたファイルに名前をつけて、それをデータベースに保存していきます

UsersController@store

if($file = $request->file_name){
//保存するファイルに名前をつける    
   $fileName = time().'.'.$file->getClientOriginalExtension();
//Laravel直下のpublicディレクトリに新フォルダをつくり保存する
   $target_path = public_path('/uploads/');
   $file->move($target_path,$fileName);
       
 }else{
//画像が登録されなかった時はから文字をいれる
   $name = "";
 }
$request->user()->create([
    'name'=>$request->input('name'),
    'file_name'=>$fileName,
]);

①保存した時刻とファイルの拡張子を組み合わせて$fileNameにいれる

アップロードしたファイルの情報を取得したいときに使える関数

getClientOriginalName()→アップロードするファイル名を取得するため
getFilename()→アップロードするファイルの一時的な名を取得するため
getRealPath()→アップロードされたファイルのパスを取得
getClientSize()→アップロードされたファイルのサイズを取得
getClientMimeType()→アップロードされたファイルのmimeタイプを取得
getClientOriginalExtension()→アップロードされたファイルの拡張子を取得

②アップロードしたファイルを移動させるパスを作成

public_path関数は、publicディレクトリの完全パスを返します。さらに、publicディレクトリ中の指定ファイルへの完全パスを生成することもできます。https://readouble.com/laravel/6.x/ja/helpers.html#method-public-path

③アップロードしたファイルを指定したフォルダに移動

publicディレクトリ内に、今回はuploadsフォルダを作成。そこに保存したファイル名を移動させる。move関数は第一引数にファイルパス、第二引数にファイル名を記載。

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

ファイルの表示

シンボリックリンクをはります。

$ php artisan storage:link

これによりpublicディレクトリの下にstorageディレクトリが作成されました。

publicディレクトリの下においたファイルはブラウザからアクセスできる為、表示させたいviewファイルにimgタグを使って表示させましょう。

<img src="/uploads/{{ $user->file_name }}">

まとめ

１　Formにenctypeを設定

２　publicディレクトリの下に画像を保存する為のフォルダを作る

３　シンボリックリンクをはる

これでスムーズにファイルのアップロードができるはずです！わかりやすかったという方はスキをお願いします！単純に喜びます！

参考

laravelの勉強で使用している本です。
はじめの１冊にはこちらがおすすめ！

PHPフレームワークLaravel入門 第2版

もう少し詳しく学びたい方に。

Laravel リファレンス[Ver.5.1 LTS 対応] Web職人好みの新世代PHPフレームワーク

ブログやってます

AKlog