ほぼすべてのアプリケーションは、プロフィール写真、KYC検証のための文書、履歴書を含む文書など、何らかのファイルアップロードに関係しています。

したがって、Laravelでファイルアップロードを処理する方法を理解することが重要です。

このチュートリアルでは、ユーザーが自分の詳細を記入する必要があり、これらの詳細にはプロフィール写真の提出が含まれる単純なユーザープロフィールフ

このチュートリアルの最後に、ファイルのアップロードを処理し、ファイルのアップロード検証を処理し、ファイルが正常にアップロードされないときに何をすべきかを知ることができるはずです。

セットアップ

開始するには、Laravelをシステムにインストールする必要があります。 Laravelが既にインストールされている場合は、このステップをスキップできます。

laravelをグローバルにインストールすることをお勧めします。 あなたが頻繁にそれを使用する予定の場合は特に。 これを行うには、端末で次のコマンドを実行します。

composer global require laravel/installer

それが完了したら、このチュートリアルのために新しいLaravelプロジェクトを作成することができます。

laravel new profile-form

上記のコマンドを実行すると、profile-formという名前の現在のディレクトリに新しいLaravelプロジェクトが作成されます。

以下を実行してアプリを提供します:

cd profile-formphp artisan serve

に移動すると、デフォルトのLaravelランディングページが表示されるアプリが表示されます。

データベース移行の作成

ユーザーの詳細を格納するusersテーブルを作成する必要があります。Laravelにはdatabase\migrations14_10_12_000000_create_users_table.phpにあるusersテーブルの移行が同梱されています。 このファイルを次のように変更します。

ここでは、usersテーブルのデフォルトのlaravel移行を変更して、users写真へのURLを格納するフィールドphotoを含めました。

正しいデータベースの詳細を含めるenvファイル。 次に、次のコマンドを実行して移行を実行します:

php artisan migrate

写真フィールドの追加を反映するようにユーザーモデルを更新します。 $fillableに写真を追加して、ユーザーの作成と更新時にlaravelが自動入力できるようにします。

// App\User.phpprotected $fillable = ;

それが完了したら、プロファイルフォームのフロントエンドの構築に進むことができます。

フロントエンドの構築

ユーザーがアプリケーションに登録してログインできるようにする認証システムを作成する必要があります。

リソース/ビューにregister.blade.phpという新しいファイルを作成します。 新しく作成されたファイルに以下を追加します。

スタイリングにbootstrapを使用しているため、ページの上部に追加する必要があります。 ユーザーがすべてのフィールドを入力せずにフォームを送信できないように、ここで必要なすべてのフィールドを作成しました。

ここで特に重要なフィールドは、ファイル入力フィールド<input type="file"Update webです。登録ページへのルートを含めるphp

// web.php...Route::get('/register', function () { return view('register');});

に行くと、登録フォームの典型的なフィールドを含む登録ページが表示されます。

サポートされるファイルの種類を指定する必要があります。 画像ファイルだけが必要なので、input要素で画像ファイルだけが必要であることを指定する必要があります。

inputタグにimage/*の値を持つaccept属性を追加して、input:type="file"を画像ファイルのみ受け入れるように修正します。

写真セクションは次のようになります。

フォームはバックエンドに画像を送信するように設定されていますが、まだそれを行うことはできません。 別のタイプのフォームデータ、この場合はバイナリデータをバックエンドに送信する必要があることをフォームに伝える必要があります。

これを行うには、enctype属性をform要素に追加し、その値をmultipart/form-dataに設定します。

開始フォームタグは次のようになります:

<form action="#" class="col-md-5" enctype="multipart/form-data">

次に、アップロードを処理するコントローラを記述する必要があります。

コントローラを書く

私たちのバックエンドは、検証を処理し、ユーザーを保存し、リダイレクト/認証することができるはずです。

Laravelにはapp\Http\Controllers\Auth\RegisterController.phpにあるRegisterControllerが同梱されています。

Validation

レジスタコントローラのvalidatorメソッドは、フィールドの検証を担当します。 それでは、私たちが実際に欲しいものを反映するためにそれを更新してみましょう。

RegisterControllerのバリデーターメソッドを変更します。私たちのすべてのフィールドを検証するためのphp。

名前フィールドは必須フィールドであり、文字列である必要があります。 同様の電子メールとパスワードのために行きます。

パスワード欄を確認する必要があります。 フロントエンドに、password_confirmationのフィールドを追加しました。 これは、パスワードフィールドと比較されるものです。 最後に写真のフィールド。

このフィールドは登録時に必須です。 私たちのデータベースの移行では、そうしていたので、それが必要です。 Nullableに設定した場合、検証をrequiredに設定する必要はありません。

Laravelには便利な検証ルールimageもあり、画像ファイル（jpeg、png、bmp、gif、svgのいずれかの拡張子を持つファイル）を検証するために使用されます。

ファイルに対して実行したい可能性のある他の検証は、ファイルサイズが特定の量よりも大きくないか小さくないことを確認することです。

• このルールは、必要に応じてmax:500またはmin:500として追加できます。 ここでのファイルサイズはキロバイト
• で、画像のサイズを確認していることに注意してください。 これは、ルール'dimensions:min_width=100,min_height=200'の配列に以下を追加することによって行うことができます。

の保存次のステップは画像の保存です。 この機能を処理するための新しい関数を作成します。

ファイルをアプリケーションに保存できる場所はいくつかあります。

Laravelはこれらの場所にファイルを保存するためのサポートを提供しています。 簡単にするために、アプリケーションに画像ファイルを保存します。

LaravelリクエストクラスIlluminate\Http\Requestは、すぐにファイル処理をサポートします。 アップロードされたファイルは$request→file(<inputName>)→store(<folderToBeStored>)で保存できます。 私たちの場合、私たちは使用することができます:

$request->file('photo')->store('profile')

これにより、ファイルはstorage\app\profileフォルダに格納されます。 ファイルはランダムな名前で保存され、ファイルへのurlが返されます。

保存されている画像にカスタム名を割り当てたい場合は、storeAsメソッドを使用する必要があります。

storeAsメソッドを使用すると

$request→file(<inputName>)→storeAs(<folderToBeStored>, <customName.fileExtension>)

のようになりますファイル拡張子は重要であり、laravelはclientExtensionメソッドを使用してアップロードされたファイルの拡張子を取得する簡単な方法を提供しています。

以下のように取得できます

$request->file('photo')->extension()

この方法を使用すると、ユーザーの名前に基づいてユーザーの画像を保存できます。

$fileName = $request->get('name') . '.' . $request->file('photo')->extension(); $request->file('photo')->storeAs('profile', $fileName);

私たちの場合、laravelがファイルを保存するランダムな名前で行うことができます。

• ファイルを公開してアクセスするには、storage/app/publicフォルダに保存する必要があります。

• 他のフォルダ内のファイルは公開されません

ストレージに画像を保存するタスクを処理する関数を作成しましょう。

validator関数の下に、次の

を追加しますstoreImage関数は画像をstorage/app/public/profile フォルダに保存し、ファイルの保存場所へのURLを返します。

すべてをまとめる

やるべきことをもっと追加しているので、laravelが提供するデフォルトのregisterメソッドをオーバーライドする必要があります。

Laravelはユーザー登録のためのトレイトを提供しています。Illuminate\Foundation\Auth\RegistersUsers.phpで見つけることができます。

以下を含むようにレジスタコントローラを更新します:

上記のように、create関数は、送信されたデータに基づいてユーザーを作成する作業を行います。

レジスタ関数はすべてが起こる場所です。 検証は、他のものの前に最初に実行されます。

検証に合格した場合は、画像を保存します。 これが完了したら、必要なすべてのデータを配列$dataに渡してユーザーを作成します。

すべてが正常に行われた場合、ユーザーを認証し、ホームページにリダイレクトします。

アップロードされた画像を表示する

ホームページは、すべてのユーザーの詳細を表示します。 まず、そのためのルートとコントローラを作成しましょう。

端末で、コードを実行してHomeControllerを生成します。

php artisan make:controller HomeController

新しく作成されたHomeControllerに移動し、クラスに次のメソッドを追加します。

コンストラクタでは、authミドルウェアを使用していることを定義します。 このミドルウェアが行うことは、許可されたユーザーのみがクラスで定義された関数にアクセスできるようにすることです。

したがって、ユーザーは認証された場合にのみここに来ることができます。 ユーザーが認証されていない場合は、ログインページにリダイレクトされます。

show関数はホームページの表示を処理します。 認証されたユーザーもビューに渡しています。 これの詳細については、laravelのドキュメントをご覧ください。

ホームルートを含むようにroutesファイルを更新します。

// web.php...Route::get('/home', '[email protected]')->name('home');

最後に家を作成します。ブレイドresources/viewsディレクトリ内のphpファイル。

以下をホームに追加します。ブレイドphp:

ビューファイルでは、コントローラから渡されたuserデータにアクセスできます。

現在、ユーザーの写真が利用できないため、プレースホルダー画像を使用してユーザーの写真を表示しています。

public/storageからstorage/app/publicフォルダへのシンボリックリンクを作成する必要がありますlaravelにartisanコマンドを提供することで、これを簡単にします:

php artisan storage:link

その後、画像タグを更新してプロファイル画像を表示します。

<img src="https://codesource.io/handling-file-uploads-in-laravel/amp/{{asset('storage/'.$user->photo)}}" class="card-img-top" alt="...">

!! Laravelに画像を保存する方法を正常に学習しました。

結論

ほとんどすべてのアプリケーションは、何らかの方法でファイルを保存する必要があります。 上記のガイドに従って、画像やその他のファイルをローカルストレージに保存できるはずです。ここで使用されているすべてのコードは、Githubでhere見つけることができます。