Articles

Bestanden uploaden in Laravel – CodeSource.io

bijna alle toepassingen hebben te maken met het uploaden van bestanden: een profielfoto, een document voor KYC-verificatie, een document met CV, enz.

daarom is het belangrijk om te begrijpen hoe om te gaan met het uploaden van bestanden in Laravel.

in deze tutorial gaan we een eenvoudig gebruikersprofiel maken, waarin de gebruiker zijn gegevens moet invullen en deze gegevens omvatten het indienen van een profielfoto.

aan het einde van deze tutorial moet u Bestand uploads kunnen verwerken, bestand uploadvalidatie kunnen verwerken en weten wat u moet doen als het bestand niet succesvol wordt geüpload.

instellen

om te beginnen moet Laravel op uw systeem worden geïnstalleerd. Als je Laravel al hebt geïnstalleerd, kun je deze stap overslaan.

ik raad u aan Laravel globaal te installeren. Vooral als je van plan bent om het vaak te gebruiken. U kunt dit doen door het volgende commando op een terminal uit te voeren.

composer global require laravel/installer

zodra dit voltooid is, kunnen we doorgaan met het maken van een nieuw Laravel project voor deze tutorial.

laravel new profile-form

het uitvoeren van het bovenstaande commando zal een nieuw Laravel project aanmaken in de huidige map met de naam profile-form.

Serveer de app door het volgende uit te voeren:

cd profile-formphp artisan serve

Navigeer naar waar u uw app vindt met de standaard Laravel landing page.

het schrijven van de databasemigratie

we moeten een gebruikerstabel maken waarin gebruikersgegevens worden opgeslagen.Laravel verzendt met een migratie voor de gebruikerstabel die kan worden gevonden op database\migrations14_10_12_000000_create_users_table.php. Wijzig dat bestand om er als volgt uit te zien:

hier zijn we de standaard Laravel migratie voor de gebruikers tabel aangepast om een veld foto op te nemen die de URL naar de gebruikers foto zal opslaan.

wijzigen .env-bestand om de juiste gegevens van de database op te nemen. Voer vervolgens de migraties uit door het volgende commando uit te voeren:

php artisan migrate

werk het gebruikersmodel bij om de toevoeging van het fotoveld weer te geven. Foto toevoegen aan $fillable zodat deze automatisch kan worden ingevuld door laravel bij het aanmaken en bijwerken van een gebruiker.

// App\User.phpprotected $fillable = ;

Zodra dat gedaan is, kunnen we doorgaan met het bouwen van de frontend van het profielformulier.

de Frontend bouwen

we moeten een authenticatiesysteem maken waarmee de gebruiker zich kan registreren en inloggen in de toepassing.

Maak een nieuw bestand aan in resources/views genaamd register.blade.php. Voeg het volgende toe aan het nieuw aangemaakte bestand.

we gebruiken bootstrap voor styling, vandaar de noodzaak om het toe te voegen aan het bovenste gedeelte van de pagina. We hebben alle vereiste velden hier gemaakt, zodat de gebruiker niet in staat zal zijn om het formulier in te dienen zonder het invullen van alle velden.

het veld dat bijzonder belangrijk is voor ons hier is het bestand invoerveld <input type="file" Update web.php om de route naar de registerpagina

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

op te nemen naar zal de registerpagina tonen met de velden die typerend zijn voor een registratieformulier.

formulier voor het uploaden van bestanden

we moeten het bestandstype opgeven dat wordt ondersteund. Omdat we alleen afbeeldingsbestanden willen, moeten we in het invoerelement opgeven dat we alleen afbeeldingsbestanden willen.

Modfiy de input:type="file" om alleen afbeeldingsbestanden te accepteren door het accept-attribuut met een waarde van image/* toe te voegen aan de input tag.

de sectie foto zou nu als volgt moeten zijn:

hoewel het formulier zo lijkt dat het Afbeeldingen naar de backend stuurt, kan het dat nog niet doen. We moeten het formulier vertellen dat het een ander type formuliergegevens naar de backend moet sturen, in dit geval binaire gegevens.

we doen dit door het enctype attribuut toe te voegen aan het formulierelement, en de waarde ervan in te stellen op multipart/form-data.

het openingsformulier moet er zo uitzien:

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

vervolgens moeten we de controller schrijven om de upload af te handelen.

het schrijven van de Controller

onze backend moet in staat zijn om de validatie, het opslaan en omleiden/authenticatie van de gebruiker af te handelen.

Laravel schepen met een RegisterController die te vinden is op app\Http\Controllers\Auth\RegisterController.php.

validatie

de validator methode in het Register Controller is belast met de verantwoordelijkheid voor het valideren van de velden. Laten we het bijwerken om te reflecteren wat we eigenlijk willen.

Wijzig de validatiemethode in RegisterController.php om al onze velden te valideren.

het veld Naam moet een verplicht veld zijn, en een string, vandaar de validatieregels. Hetzelfde geldt voor e-mail en wachtwoord.

het veld Wachtwoord moet worden bevestigd. In de frontend hebben we een veld toegevoegd voor password_confirmation. Hiermee wordt het wachtwoordveld vergeleken. Eindelijk het fotoveld.

dit veld is verplicht bij registratie. Het is nodig omdat we het in onze database migratie hebben gemaakt. Als we het op nul hadden gezet, dan hadden we de validatie niet op vereist hoeven zetten.

Laravel heeft ook een handige validatieregel, image, die wordt gebruikt om afbeeldingsbestanden te valideren (bestanden met een van de volgende extensies: jpeg, png, bmp, gif of svg).

een andere validatie die u mogelijk wilt uitvoeren op Bestanden is

  • zodat de bestandsgrootte niet groter of kleiner is dan een bepaald bedrag. Deze regel kan worden toegevoegd als max:500 of min:500. Opgemerkt moet worden dat de bestandsgrootte hier in kilobytes
  • is om de afmetingen van de afbeelding te controleren. Dit kan gedaan worden door het volgende toe te voegen aan de array van regels 'dimensions:min_width=100,min_height=200'.

opslaan

de volgende stap is het opslaan van de afbeelding. We zullen een nieuwe functie maken om deze functionaliteit af te handelen.

er zijn verschillende plaatsen waar bestanden kunnen worden opgeslagen in een toepassing: ze kunnen worden opgeslagen in een S3 bucket, google drive, of zelfs in uw toepassingsserver.

Laravel wordt geleverd met ondersteuning voor het opslaan van bestanden op deze locaties. Voor de eenvoud zullen we het afbeeldingsbestand opslaan in de applicatie.

Laravel Request class, Illuminate\Http\Request biedt ondersteuning voor het verwerken van bestanden uit de doos. Het geüploade bestand kan worden opgeslagen via $request→file(<inputName>)→store(<folderToBeStored>). Voor onze zaak kunnen we:

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

dit slaat het bestand op in de map opslag \app\profile. Het bestand wordt opgeslagen met een willekeurige naam en de url naar het bestand wordt geretourneerd.

als we een aangepaste naam willen toewijzen aan de afbeelding zoals deze wordt opgeslagen, moeten we de storeAs methode gebruiken.

het gebruik van de storeAs methode zal eruit zien als

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

de bestandsextensie is belangrijk, en laravel biedt eenvoudige manieren om de bestandsextensie van het geüploade bestand te krijgen, via de clientExtension methode.

het kan verkregen worden zoals hieronder getoond

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

met deze methode kunnen we de afbeelding van een gebruiker opslaan op basis van de naam van de gebruiker.

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

in ons geval kunnen we het doen met de willekeurige Namen die laravel ons bestand opslaat.

  • om uw bestand openbaar toegankelijk te maken, moet het worden opgeslagen in de storage/app/public map.
  • bestanden in andere mappen zullen niet openbaar beschikbaar zijn

laten we een functie aanmaken die de taak van het opslaan van afbeeldingen in de opslag uitvoert.

voeg onder de functie validator de volgende

toe de functie storeImage slaat de afbeelding op in de map storage/app/public/profile en geeft een URL terug naar de opslaglocatie van het bestand.

het geheel samenvoegen

omdat we meer dingen toevoegen die gedaan moeten worden, moeten we de standaard register methode overschrijven die laravel ons geeft.

Laravel biedt een eigenschap voor het registreren van gebruikers en is te vinden op Illuminate\Foundation\Auth\RegistersUsers.php.

werk de Registercontroller bij met het volgende::

zoals hierboven te zien is, doet de create functie het werk van het maken van een gebruiker op basis van de gegevens die naar hem worden verzonden.

de functie register is waar alles gebeurt. De validatie wordt eerst uitgevoerd voordat iets anders.

als de validatie wordt doorgegeven, slaan we de afbeelding op. Daarna maken we de gebruiker aan door alle gegevens die nodig zijn in een array, $data, door te geven.

als alles succesvol gebeurt, authenticeren we de gebruiker en leiden we door naar de startpagina.

toont de geüploade afbeelding

op de homepage worden alle gebruikersgegevens weergegeven. Laten we eerst een route en controller maken.

op de terminal, voer de code uit om de HomeController te genereren.

php artisan make:controller HomeController

Ga naar de nieuw aangemaakte HomeController, en voeg de volgende methoden toe aan de klasse.

in de constructor definiëren we dat we de auth middleware gebruiken. Wat deze middleware doet is dat het alleen geautoriseerde gebruikers toegang geeft tot functies die in de klasse zijn gedefinieerd.

daarom kan de gebruiker hier alleen komen als hij geauthenticeerd is. Als de gebruiker niet is geverifieerd, wordt hij doorgestuurd naar de login pagina.

de functie tonen behandelt de weergave van de startpagina. We zijn het doorgeven van de geverifieerde gebruiker aan de weergave ook. Kijk voor meer informatie in de laravel documentatie.

werk het routebestand bij om de home route te bevatten.

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

maak uiteindelijk een home aan.blad.php-bestand in de resources/views map.

voeg het volgende toe aan home.blad.php:

in het view-bestand hebben we toegang tot de user gegevens die van de controller zijn doorgegeven.

we gebruiken momenteel een plaatshouder om de foto van de gebruiker te tonen, omdat de foto momenteel niet voor ons beschikbaar is.

we moeten een symbolische link maken van public/storage naar storage/app/public map naar Laravel maakt dit eenvoudig door het artisan commando te geven:

php artisan storage:link

nadat u dat hebt gedaan, werkt u de image tag bij om de profielafbeelding weer te geven.

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

Gefeliciteerd!!! Je hebt met succes geleerd hoe je beelden op te slaan in laravel.

conclusie

bijna alle toepassingen vereisen het opslaan van bestanden op een of andere manier. Naar aanleiding van de bovenstaande gids, moet u in staat zijn om afbeeldingen en andere bestanden op te slaan op de lokale opslag.Alle code die hier gebruikt wordt is hier te vinden op Github.