Laravel8でユーザー登録フォームにアバター画像を追加する方法

LaravelのBootstrapを使ったユーザー登録画面で、アバター画像用フィールドを追加する方法を解説します。

フォーラムサイトなど、ユーザーの画像があったほうが良いWebアプリで使えます。

ステップがたくさんあってやや面倒なのですが、ひとつずつ説明していきますね。

Laravel8でユーザー登録フォームにアバター画像を追加する方法

Laravel8でユーザー登録フォームにアバター画像を追加する方法

下記の手順ですすめていきます。

Bootstrapで認証画面を作る
Userテーブルにavatarカラムを追加
Userモデルにavatarフィールドを追加
RegisterコントローラーにAvatarを追加
register.blade.phpにAvatarフィールドを追加
テストする
うまくいかない場合

Bootstrapで認証画面を作る

まずBoostrapで認証画面が必要です。

uiを組み込んだ後、bootstrapの認証機能を入れます。

composer require laravel/ui

1	composer require laravel/ui

php artisan ui bootstrap --auth

1	php artisan ui bootstrap --auth

Laravelのインストール方法解説記事で詳しく紹介しているので、分かりにくければ、こちらも参考にしてください。

Laravelのインストールと環境構築・Windows編【Laravel入門講座】

Windows環境でXAMPP(ザンプ）を使ったLaravelのインストール・開発環境構築方法を解説します。最初はインストールするものも多いので、すごくスムーズに進められたとして、2～3時間は見ておいたほうが良いでしょう。 ...

Userテーブルにavatarカラムを追加

既存のUserテーブルにAvatarカラムを追加します。

下記コマンドで、マイグレーションファイルを作成します。

php artisan make:migration add_column_avatar_to_user_table --table=users

1	php artisan make:migration add_column_avatar_to_user_table --table=users

database/migrations の中にファイルができるので、下記のように編集します。

    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('avatar')->after('name');
        });
    }


    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->dropColumn('avatar');
        });
    }

public function up()

{

Schema::table('users', function (Blueprint $table) {

$table->string('avatar')->after('name');

});

}

public function down()

{

Schema::table('users', function (Blueprint $table) {

$table->dropColumn('avatar');

});

}

avatar登録を【必須】ではなく【任意】にする場合は、->default を使って、default画像を設定しておくと良いですよ。

        Schema::table('users', function (Blueprint $table) {
            $table->string('avatar')->default('user_default.jpg')->after('name');
        });

Schema::table('users', function (Blueprint $table) {

$table->string('avatar')->default('user_default.jpg')->after('name');

});

ファイル編集後、マイグレートを実行します。

php artisan migrate

1	php artisan migrate

Userモデルにavatarフィールドを追加

Userモデルファイルを開き、avatarフィールドもfillableに加えておきましょう。

これで、フォームから入力可能になります。

    protected $fillable = [
        'name',
        'avatar',
        'email',
        'password',
    ];

protected $fillable = [

'name',

'avatar',

'email',

'password',

];

RegisterコントローラーにAvatarを追加

app/Http/Controllers/Authの中のRegisterController.phpを開きます。

50行目あたりの validatorに、avatarのバリデーションルールを加えておきましょう。

入力必須にするならrequired、画像形式のみ可能にするなら imageをいれます。

    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'avatar'=>['required', 'image'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }

protected function validator(array $data)

{

return Validator::make($data, [

'name' => ['required', 'string', 'max:255'],

'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],

'avatar'=>['required', 'image'],

'password' => ['required', 'string', 'min:8', 'confirmed'],

]);

}

67行目あたりのcreateの処理は、次のようにいれます。

    protected function create(array $data)
    {
        $avatar=request()->file( 'avatar')->getClientOriginalName();
        request()->file( 'avatar')->storeAs('public/images', $avatar);

        $user = User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'avatar' => $avatar,
            'password' => Hash::make($data['password']),
        ]);
        return $user;
    }

protected function create(array $data)

{

$avatar=request()->file( 'avatar')->getClientOriginalName();

request()->file( 'avatar')->storeAs('public/images', $avatar);

$user = User::create([

'name' => $data['name'],

'email' => $data['email'],

'avatar' => $avatar,

'password' => Hash::make($data['password']),

]);

return $user;

}

コードの意味avatarフィールドの元々のファイル名をアバターの名前（$avatar) とします。

avatarフィールドの画像をpublic/imagesに、$avatarという名前で保存します。

name, email, avatar, password フィールドの情報を使って、ユーザーを新規作成します。

getClientOriginalName()を使うと、アップロードしたファイルの元の名前を取ってこれます。

storeAs()は、ファイルに自分で名前を付けて保存ができるメソッドです。

引数は、次のように設定します。

storeAs(ファイルの保存場所, ファイル名)

register.blade.phpにAvatarフィールドを追加

次にユーザーに表示する部分を作ります。

resources/views/authの中のregister.blade.phpを編集します。

54行目あたりに下記を追加してください。

                        <div class="form-group row">
                            <label for="avatar" class="col-md-4 col-form-label text-md-right">{{ __('プロフィール画像 (サイズは1024Kbyteまで）') }}</label>

                            <div class="col-md-6">
                                <input id="avatar" type="file" name="avatar" class="@error('avatar') is-invalid @enderror">
                                @error('avatar')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

<label for="avatar" class="col-md-4 col-form-label text-md-right">{{ __('プロフィール画像 (サイズは1024Kbyteまで）') }}</label>

@error('avatar')

<strong>{{ $message }}</strong>

</span>

@enderror

</div>

*また22行目のformタグには enctype="multipart/form-data" も入れておいてください。

                    <form method="POST" action="{{ route('register') }}" enctype="multipart/form-data">

1	<form method="POST" action="{{ route('register') }}" enctype="multipart/form-data">

追加：まだ画像保存をしたことがない場合

もしまだ画像を保存したことがない場合、最初にシンボリックリンクを貼っておきましょう。

Laravelでは画像はstorageフォルダに保存されますが、読み込むときはpublicフォルダを通じて読み込みます。

最初にstorageフォルダとpublicフォルダを結びつける設定が必要になります。

これがシンボリックリンクです。

次のコマンドを実行してください。

php artisan storage:link

1	php artisan storage:link

テストする

これで準備完了です。

実際にテストしてみましょう。

バリデーションでavatarを’required'(入力必須）にした場合、avatarを入れないと、エラーメッセージがでるはずです。

無事アップロードできると、storage/app/public/imagesフォルダの中に画像が保存されています。

データベースにもファイル名が登録されているはずなので、ご確認ください。

なおリンクをblade.phpファイルに挿入するときは、asset関数を使って、次のように記述します。

<img src="{{asset('storage/images/'.$user->avatar)}}" class="d-block rounded-circle mb-3">

1	<img src="{{asset('storage/images/'.$user->avatar)}}" class="d-block rounded-circle mb-3">

うまくいかない場合

本記事ではわたし自身が実証済みの方法を紹介しております。

ただ、画像が思った場所に入ってくれないことがあるかもしれません。

じゅんこ

わたしは何度か経験しました

うまくいかない場合には、RegisterControllerの画像ファイルを保存する設定を変更したり、

blade.phpファイルの画像ファイルのリンクを変えてみたりしてください。

じゅんこ

ブラウザからソースコードもチェックしてみてください。

どう変えると良いか、ヒントが得られるかも。

「Laravelでの画像アップロード・保存機能が分かりにくい」と感じたら、こちらの記事も参考にしてくださいね。

画像付き投稿フォームの作り方を解説しています。

画像アップロード機能を投稿フォームにつける【初心者のLaravel入門講座】

Laravelで投稿フォームに画像のアップロード機能を付ける方法を解説していきますね。画像を保存するために、storeAs と getClientOriginalNameを使っていきます。 *バージョンはLaravel8を使っ...