Articles

Umgang mit Datei-Uploads in Laravel – CodeSource.io

Fast alle Anwendungen haben mit dem Hochladen von Dateien zu tun: ein Profilbild, ein Dokument zur KYC-Überprüfung, ein Dokument mit Lebenslauf usw.

Daher ist es wichtig zu verstehen, wie mit Datei-Uploads in Laravel umgegangen wird.

In diesem Tutorial werden wir ein einfaches Benutzerprofilformular erstellen, in dem der Benutzer seine Daten eingeben muss.

Am Ende dieses Tutorials sollten Sie in der Lage sein, Datei-Uploads zu verarbeiten, die Validierung von Datei-Uploads durchzuführen und zu wissen, was zu tun ist, wenn die Datei nicht erfolgreich hochgeladen wird.

Einrichten

Um loszulegen, muss Laravel auf Ihrem System installiert sein. Wenn Sie Laravel bereits installiert haben, können Sie diesen Schritt überspringen.

Ich würde empfehlen, Laravel global zu installieren. Vor allem, wenn Sie planen, es oft zu verwenden. Sie können dies tun, indem Sie den folgenden Befehl auf einem Terminal ausführen.

composer global require laravel/installer

Sobald dies abgeschlossen ist, können wir ein neues Laravel-Projekt für dieses Tutorial erstellen.

laravel new profile-form

Wenn Sie den obigen Befehl ausführen, wird ein neues Laravel-Projekt im aktuellen Verzeichnis mit dem Namen profile-form .

Stellen Sie die App bereit, indem Sie Folgendes ausführen:

cd profile-formphp artisan serve

Navigieren Sie zu , wo Ihre App die Standard-Laravel-Zielseite anzeigt.

Schreiben der Datenbankmigration

Wir müssen eine Benutzertabelle erstellen, in der Benutzerdetails gespeichert werden.Laravel wird mit einer Migration für die Benutzertabelle geliefert, die unter database\migrations14_10_12_000000_create_users_table.php zu finden ist. Ändern Sie diese Datei so, dass sie folgendermaßen aussieht:

Hier haben wir die Standard-Laravel-Migration für die Benutzertabelle so geändert, dass sie ein Feldfoto enthält, in dem die URL zum Benutzerfoto gespeichert wird.

Ändern Sie die .env-Datei, um die korrekten Datenbankdetails einzuschließen. Führen Sie dann die Migrationen aus, indem Sie den folgenden Befehl ausführen:

php artisan migrate

Aktualisieren Sie das Benutzermodell, um die Hinzufügung des Fotofelds widerzuspiegeln. Fügen Sie dem $fillable ein Foto hinzu, damit es von Laravel beim Erstellen und Aktualisieren eines Benutzers automatisch ausgefüllt werden kann.

// App\User.phpprotected $fillable = ;

Sobald dies erledigt ist, können wir mit dem Erstellen des Frontends des Profilformulars fortfahren.

Aufbau des Frontends

Wir müssen ein Authentifizierungssystem erstellen, mit dem sich der Benutzer registrieren und in die Anwendung einloggen kann.

Erstellen Sie eine neue Datei in Ressourcen / Ansichten mit dem Namen register.blade.php. Fügen Sie der neu erstellten Datei Folgendes hinzu.

Wir verwenden Bootstrap für das Styling, daher muss es im oberen Bereich der Seite hinzugefügt werden. Wir haben hier alle erforderlichen Felder erstellt, damit der Benutzer das Formular nicht senden kann, ohne alle Felder auszufüllen.

Das Feld, das uns hier besonders wichtig ist, ist das Dateieingabefeld <input type="file" Update web.php, um die Route zur Registerseite einzuschließen

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

Wenn Sie zu gehen, wird die Registerseite angezeigt, die die für ein Registrierungsformular typischen Felder enthält.

Datei-Upload-Formular

Wir müssen den Dateityp angeben, der unterstützt wird. Da wir nur Bilddateien wollen, müssen wir im Eingabeelement angeben, dass wir nur Bilddateien wollen.

Modfiy die input:type="file" , um nur Bilddateien zu akzeptieren, indem Sie das accept Attribut mit dem Wert image/* zum input Tag hinzufügen.

Der Fotobereich sollte jetzt wie folgt aussehen:

Während das Formular so eingestellt ist, dass Bilder an das Backend gesendet werden, kann es das noch nicht. Wir müssen dem Formular mitteilen, dass es eine andere Art von Formulardaten an das Backend senden muss, in diesem Fall Binärdaten.

Dazu fügen wir dem Formularelement das Attribut enctype hinzu und setzen seinen Wert auf multipart/form-data .

Das öffnende Formular-Tag sollte wie folgt aussehen:

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

Als nächstes müssen wir den Controller schreiben, um den Upload zu verarbeiten.

Schreiben des Controllers

Unser Backend sollte in der Lage sein, die Validierung, Speicherung und Umleitung / Authentifizierung des Benutzers zu übernehmen.

Laravel wird mit einem RegisterController ausgeliefert, der unter app\Http\Controllers\Auth\RegisterController.php zu finden ist.

Validierung

Die validator -Methode im Registercontroller hat die Aufgabe, die Felder zu validieren. Aktualisieren wir es also, um zu reflektieren, was wir eigentlich wollen.

Ändern Sie die Validierungsmethode in RegisterController.php, um alle unsere Felder zu validieren.

Das Feld name sollte ein erforderliches Feld und eine Zeichenfolge sein, daher die Validierungsregeln. Ähnliches gilt für E-Mail und Passwort.

Das Passwortfeld muss bestätigt werden. Im Frontend haben wir ein Feld für password_confirmation hinzugefügt. Damit wird das Passwortfeld verglichen. Schließlich das Fotofeld.

Dieses Feld ist bei der Registrierung erforderlich. Es ist erforderlich, weil wir es bei unserer Datenbankmigration so gemacht haben. Wenn wir es auf null gesetzt hätten, müssten wir die Validierung nicht auf required setzen.

Laravel hat auch eine praktische Validierungsregel, image , mit der Bilddateien validiert werden (Dateien mit einer der folgenden Erweiterungen: jpeg, png, bmp, gif oder svg).

Einige andere Überprüfungen, die Sie möglicherweise für Dateien durchführen möchten, sind

  • Sicherstellen, dass die Dateigröße nicht größer oder kleiner als ein bestimmter Betrag ist. Diese Regel kann je nach Bedarf als max:500 oder min:500 hinzugefügt werden. Es ist zu beachten, dass die Dateigröße hier in Kilobyte
  • angegeben ist, um die Abmessungen des Bildes zu überprüfen. Dies kann durch Hinzufügen des Folgenden zum Array von Regeln 'dimensions:min_width=100,min_height=200' erfolgen.

Speichern

Der nächste Schritt ist das Speichern des Bildes. Wir werden eine neue Funktion erstellen, um diese Funktionalität zu handhaben.

Es gibt verschiedene Orte, an denen Dateien in einer Anwendung gespeichert werden können: Sie können in einem s3-Bucket, in Google Drive oder sogar in Ihrem Anwendungsserver gespeichert werden.

Laravel unterstützt das Speichern von Dateien an diesen Speicherorten. Der Einfachheit halber speichern wir die Bilddatei in der Anwendung.

Laravel Request class, Illuminate\Http\Request bietet Unterstützung für die standardmäßige Dateibehandlung. Die hochgeladene Datei kann über $request→file(<inputName>)→store(<folderToBeStored>) gespeichert werden. Für unseren Fall könnten wir verwenden:

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

Dadurch wird die Datei im Ordner storage \app\profile gespeichert. Die Datei wird unter einem zufälligen Namen gespeichert, und die URL zur Datei wird zurückgegeben.

Wenn wir dem Bild beim Speichern einen benutzerdefinierten Namen zuweisen möchten, müssen wir die storeAs -Methode verwenden.

Die Verwendung der storeAs -Methode sieht aus wie

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

Die Dateierweiterung ist wichtig, und Laravel bietet einfache Möglichkeiten, die Dateierweiterung der hochgeladenen Datei über die clientExtension -Methode abzurufen.

Es kann wie unten gezeigt abgerufen werden

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

Mit dieser Methode können wir das Bild eines Benutzers basierend auf dem Namen des Benutzers speichern.

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

In unserem Fall können wir mit den zufälligen Namen auskommen, die Laravel in unserer Datei speichert.

  • Damit auf Ihre Datei öffentlich zugegriffen werden kann, muss sie im Ordner storage/app/public gespeichert werden.
  • Dateien in anderen Ordnern sind nicht öffentlich verfügbar

Lassen Sie uns eine Funktion erstellen, die das Speichern von Bildern im Speicher übernimmt.

Fügen Sie unterhalb der Validator-Funktion Folgendes hinzu

Die storeImage -Funktion speichert das Bild im Ordner storage/app/public/profile und gibt eine URL zum Speicherort der Datei zurück.

Alles zusammenfügen

Da wir weitere Dinge hinzufügen, die zu tun sind, müssen wir die von Laravel für uns bereitgestellte Standardregistermethode überschreiben.

Laravel bietet eine Eigenschaft zum Registrieren von Benutzern und ist unter Illuminate\Foundation\Auth\RegistersUsers.php zu finden.

Aktualisieren Sie den Registercontroller, um Folgendes einzuschließen:

Wie oben gezeigt, erstellt die create-Funktion einen Benutzer basierend auf den Daten, die an ihn gesendet werden.

In der Registerfunktion passiert alles. Die Validierung wird zuerst vor jeder anderen Sache durchgeführt.

Wenn die Validierung bestanden ist, speichern wir das Bild. Danach erstellen wir den Benutzer, indem wir alle benötigten Daten in einem Array $data übergeben.

Wenn alles erfolgreich passiert, authentifizieren wir den Benutzer und leiten zur Startseite um.

Anzeigen des hochgeladenen Bildes

Auf der Startseite werden alle Benutzerdetails angezeigt. Lassen Sie uns zunächst eine Route und einen Controller dafür erstellen.

Führen Sie auf dem Terminal den Code aus, um den HomeController zu generieren.

php artisan make:controller HomeController

Gehen Sie zum neu erstellten HomeController und fügen Sie der Klasse die folgenden Methoden hinzu.

Im Konstruktor definieren wir, dass wir die auth Middleware verwenden. Diese Middleware ermöglicht nur autorisierten Benutzern den Zugriff auf in der Klasse definierte Funktionen.

Daher kann der Benutzer nur dann hierher kommen, wenn er authentifiziert ist. Wenn der Benutzer nicht authentifiziert ist, wird er zur Anmeldeseite weitergeleitet.

Die Show-Funktion übernimmt die Anzeige der Startseite. Wir übergeben den authentifizierten Benutzer auch an die Ansicht. Um mehr darüber zu erfahren, lesen Sie die Laravel-Dokumentation.

Aktualisieren Sie die Routendatei, um die Heimatroute zu enthalten.

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

Endlich ein Zuhause schaffen.Klinge.PHP-Datei im Verzeichnis resources/views.

Fügen Sie Folgendes zu home hinzu.Klinge.php:

In der Ansichtsdatei haben wir Zugriff auf die user Daten, die vom Controller übergeben wurden.

Wir verwenden derzeit ein Platzhalterbild, um das Foto des Benutzers anzuzeigen, da uns das Foto derzeit nicht zur Verfügung steht.

Wir müssen einen symbolischen Link von public/storage zu storage/app/public Ordner zu Laravel macht dies einfach, indem Sie den artisan Befehl:

php artisan storage:link

Aktualisieren Sie danach das Image-Tag, um das Profilbild anzuzeigen.

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

Herzlichen Glückwunsch!!! Sie haben erfolgreich gelernt, Bilder in Laravel zu speichern.

Fazit

Fast alle Anwendungen erfordern das Speichern von Dateien auf die eine oder andere Weise. Nach der obigen Anleitung sollten Sie in der Lage sein, Bilder und andere Dateien im lokalen Speicher zu speichern.Den gesamten hier verwendeten Code finden Sie hier auf Github.