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

Laravel 入門講座

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

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

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

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

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

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

Bootstrapで認証画面を作る

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

テストする

これで準備完了です。

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

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

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

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

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

うまくいかない場合

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

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

じゅんこ
じゅんこ

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

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

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

じゅんこ
じゅんこ

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

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

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

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

Laravel 入門講座

【Laravelの教科書・無料プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック
Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました