LaravelのBootstrapを使ったユーザー登録画面で、アバター画像用フィールドを追加する方法を解説します。
フォーラムサイトなど、ユーザーの画像があったほうが良いWebアプリで使えます。
ステップがたくさんあってやや面倒なのですが、ひとつずつ説明していきますね。
Laravel8でユーザー登録フォームにアバター画像を追加する方法
下記の手順ですすめていきます。
- Bootstrapで認証画面を作る
- Userテーブルにavatarカラムを追加
- Userモデルにavatarフィールドを追加
- RegisterコントローラーにAvatarを追加
- register.blade.phpにAvatarフィールドを追加
- テストする
- うまくいかない場合
Bootstrapで認証画面を作る
まずBoostrapで認証画面が必要です。
uiを組み込んだ後、bootstrapの認証機能を入れます。
composer require laravel/ui
php artisan ui bootstrap --auth
Laravelのインストール方法解説記事で詳しく紹介しているので、分かりにくければ、こちらも参考にしてください。
Userテーブルにavatarカラムを追加
既存のUserテーブルにAvatarカラムを追加します。
下記コマンドで、マイグレーションファイルを作成します。
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');
});
}
avatar登録を【必須】ではなく【任意】にする場合は、->default を使って、default画像を設定しておくと良いですよ。
Schema::table('users', function (Blueprint $table) {
$table->string('avatar')->default('user_default.jpg')->after('name');
});
ファイル編集後、マイグレートを実行します。
php artisan migrate
Userモデルにavatarフィールドを追加
Userモデルファイルを開き、avatarフィールドもfillableに加えておきましょう。
これで、フォームから入力可能になります。
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'],
]);
}
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;
}
コードの意味avatarフィールドの元々のファイル名をアバターの名前（$avatar) とします。
avatarフィールドの画像をpublic/imagesに、$avatarという名前で保存します。
name, email, avatar, password フィールドの情報を使って、ユーザーを新規作成します。
getClientOriginalName()を使うと、アップロードしたファイルの元の名前を取ってこれます。
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>
*また22行目のformタグには enctype=”multipart/form-data” も入れておいてください。
<form method="POST" action="{{ route('register') }}" enctype="multipart/form-data">
追加：まだ画像保存をしたことがない場合
もしまだ画像を保存したことがない場合、最初にシンボリックリンクを貼っておきましょう。
Laravelでは画像はstorageフォルダに保存されますが、読み込むときはpublicフォルダを通じて読み込みます。
最初にstorageフォルダとpublicフォルダを結びつける設定が必要になります。
これがシンボリックリンクです。
次のコマンドを実行してください。
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">
うまくいかない場合
本記事ではわたし自身が実証済みの方法を紹介しております。
ただ、画像が思った場所に入ってくれないことがあるかもしれません。
わたしは何度か経験しました
うまくいかない場合には、RegisterControllerの画像ファイルを保存する設定を変更したり、
blade.phpファイルの画像ファイルのリンクを変えてみたりしてください。
ブラウザからソースコードもチェックしてみてください。
どう変えると良いか、ヒントが得られるかも。
「Laravelでの画像アップロード・保存機能が分かりにくい」と感じたら、こちらの記事も参考にしてくださいね。
画像付き投稿フォームの作り方を解説しています。
コメント