Articles

Hantering av filuppladdningar i Laravel – CodeSource.io

nästan alla applikationer har att göra med filöverföring av något slag: en profilbild, ett dokument för KYC-verifiering, ett dokument som innehåller CV, etc.

därför är det viktigt att förstå hur man hanterar filuppladdningar i Laravel.

i denna handledning kommer vi att bygga ett enkelt användarprofilformulär, där användaren måste fylla i sina uppgifter och dessa uppgifter kommer att inkludera att skicka in en profilbild.

i slutet av denna handledning bör du kunna hantera filuppladdningar, hantera filuppladdningsvalidering och veta vad du ska göra när filen inte laddas upp framgångsrikt.

konfigurera

för att komma igång måste Laravel installeras på ditt system. Om du redan har installerat Laravel kan du hoppa över det här steget.

jag skulle rekommendera att du installerar Laravel globalt. Särskilt om du planerar att använda det ofta. Du kan göra det genom att köra följande kommando på en terminal.

composer global require laravel/installer

när det är klart kan vi fortsätta skapa ett nytt Laravel-projekt för denna handledning.

laravel new profile-form

om du kör ovanstående kommando skapas ett nytt Laravel-projekt i den aktuella katalogen som heter profil-form.

tjäna appen genom att köra följande:

cd profile-formphp artisan serve

navigera till där du hittar din app som visar standard Laravel-målsidan.

skriva Databasmigreringen

vi måste skapa en användartabell som lagrar användaruppgifter.Laravel levereras med en migrering för användartabellen som finns på database\migrations14_10_12_000000_create_users_table.php. Ändra den filen så att den ser ut så här:

Här har vi ändrat standard Laravel-migreringen för användartabellen för att inkludera ett fältfoto som lagrar webbadressen till användarnas fotografi.

ändra .env-fil för att inkludera rätt databasinformation. Kör sedan migreringarna genom att köra följande kommando:

php artisan migrate

uppdatera användarmodellen för att återspegla tillägget av fotofältet. Lägg till foto i $fillable så att det kan fyllas i automatiskt av laravel när du skapar och uppdaterar en användare.

// App\User.phpprotected $fillable = ;

när det är klart kan vi fortsätta att bygga frontend av profilformuläret.

bygga Frontend

vi måste skapa ett autentiseringssystem som gör det möjligt för användaren att registrera sig och logga in i applikationen.

skapa en ny fil i resurser/vyer som heter register.blade.php. Lägg till följande i den nyskapade filen.

vi använder bootstrap för styling, därav behovet av att lägga till den i den övre delen av sidan. Vi har gjort alla fält som krävs här så att användaren inte kan skicka in formuläret utan att fylla i alla fält.

fältet som är särskilt viktigt för oss här är filinmatningsfältet <input type="file" Update web.php för att inkludera rutten till registersidan

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

gå till visar registersidan som innehåller de fält som är typiska för ett registreringsformulär.

Filöverföringsformulär

vi måste ange vilken typ av filer som stöds. Eftersom vi bara vill ha bildfiler måste vi ange i inmatningselementet att vi bara vill ha bildfiler.

Modfiy input:type="file" för att acceptera endast bildfiler genom att lägga till attributet Acceptera med ett värde på image/* till inmatningstaggen.

fotografisektionen ska nu gilla:

medan formuläret ser ut att skicka bilder till backend, kan det inte göra det ännu. Vi måste berätta för formuläret att det kommer att behöva skicka en annan typ av formulärdata till backend, i detta fall binära data.

vi gör detta genom att lägga till attributet enctypei formelementet och ställa in värdet till multipart/form-data.

öppningsformtaggen ska se ut:

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

Därefter måste vi skriva styrenheten för att hantera uppladdningen.

skriva styrenheten

vår backend ska kunna hantera validering, lagring och omdirigering/autentisering av användaren.

Laravel levereras med en RegisterController som finns på app\Http\Controllers\Auth\RegisterController.php.

validering

validator – metoden i registeransvarig har till uppgift att validera fälten. Så låt oss uppdatera det för att återspegla vad vi faktiskt vill ha.

ändra validatormetoden i RegisterController.php för att validera alla våra fält.

namnfältet ska vara ett obligatoriskt fält och en sträng, därav valideringsreglerna. Liknande gäller för e-post och lösenord.

lösenordsfältet måste bekräftas. I frontend lade vi till ett fält för password_confirmation. Detta är vad lösenordsfältet jämförs med. Slutligen fotofältet.

detta fält är obligatoriskt vid registrering. Det krävs eftersom vi i vår databasmigrering gjorde det så. Om vi hade ställt in det för att vara ogiltigt, skulle vi inte behöva ställa in valideringen till krävs.

Laravel har också en praktisk valideringsregel, bild, som används för att validera bildfiler (filer med något av följande tillägg: jpeg, png, bmp, gif eller svg).

någon annan validering som du kanske vill utföras på filer är

  • se till att filstorleken inte är större eller mindre än en viss mängd. Denna regel kan läggas till som max:500 eller min:500 efter behov. Det bör noteras att filstorleken här är i kilobytes
  • kontrollera bildens dimensioner. Detta kan göras genom att lägga till följande i uppsättningen regler 'dimensions:min_width=100,min_height=200'.

lagra

nästa steg är att lagra bilden. Vi kommer att skapa en ny funktion för att hantera denna funktion.

det finns flera ställen där filer kan lagras i en applikation: de kan lagras i en S3-hink, google drive eller till och med i din applikationsserver.

Laravel kommer med stöd för att lagra filer på dessa platser. För enkelhetens skull kommer vi att lagra bildfilen i applikationen.

Laravel Request class, Illuminate\Http\Request ger stöd för filhantering ur lådan. Den uppladdade filen kan lagras via $request→file(<inputName>)→store(<folderToBeStored>). För vårt fall kan vi använda:

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

detta lagrar filen i mappen Lagring \app\profile. Filen sparas med ett slumpmässigt namn och webbadressen till filen returneras.

om vi vill tilldela ett anpassat namn till bilden när den lagras måste vi använda metoden storeAs.

använda metoden storeAs kommer att se ut som

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

filtillägget är viktigt, och laravel ger enkla sätt att få filtillägget för filen som laddades upp via metoden clientExtension.

det kan fås som visas nedan

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

med den här metoden kan vi spara en användares bild baserat på användarens namn.

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

i vårt fall kan vi nöja oss med de slumpmässiga Namnen som laravel sparar vår fil.

  • för att din fil ska kunna nås offentligt måste den lagras i mappen storage/app/public.
  • filer i andra mappar kommer inte att vara offentligt tillgängliga

Låt oss skapa en funktion som hanterar uppgiften att spara bilder till lagringen.

under valideringsfunktionen lägger du till följande

funktionen storeImage lagrar bilden i mappen storage/app/public/profile och returnerar en URL till filens lagringsplats.

att sätta ihop allt

eftersom vi lägger till fler saker att göra, måste vi åsidosätta standardregistreringsmetoden som tillhandahålls av laravel.

Laravel ger en egenskap för att registrera användare och kan hittas på Illuminate\Foundation\Auth\RegistersUsers.php.

uppdatera registeransvarig för att inkludera följande:

som framgår ovan gör create-funktionen arbetet med att skapa en användare baserat på de data som skickas till den.

registerfunktionen är där allt händer. Valideringen utförs först före någon annan sak.

om valideringen passeras lagrar vi bilden. När det är gjort skapar vi användaren genom att skicka all data som behövs i en array, $data.

om allt händer framgångsrikt autentiserar vi användaren och omdirigerar till hemsidan.

visar den uppladdade bilden

hemsidan är där vi kommer att visa alla användaruppgifter. Låt oss först skapa en rutt och kontroller för den.

på terminalen kör du koden för att generera HomeController.

php artisan make:controller HomeController

gå till den nyskapade HomeController och Lägg till följande metoder i klassen.

i konstruktören definierar vi att vi använder auth middleware. Vad denna middleware gör är att det bara tillåter auktoriserade användare att komma åt funktioner som definieras i klassen.

därför kan användaren bara komma hit om han är autentiserad. Om användaren inte är autentiserad omdirigeras han till inloggningssidan.

show-funktionen hanterar visningen av hemsidan. Vi skickar den autentiserade användaren till vyn också. För att lära dig mer om detta, kolla laravel-dokumentationen.

uppdatera routes-filen så att den innehåller Home-rutten.

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

slutligen skapa ett hem.blad.php-fil i katalogen resources/views.

Lägg till följande i hemmet.blad.php:

i view-filen har vi tillgång till user – data som skickades från styrenheten.

vi använder för närvarande en platshållarbild för att visa användarens foto eftersom fotot för närvarande inte är tillgängligt för oss.

vi måste skapa en symbolisk länk från public/storage till storage/app/public mapp till Laravel gör det enkelt genom att tillhandahålla artisan-kommandot:

php artisan storage:link

efter att ha gjort det, uppdatera bildtaggen för att visa profilbilden.

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

Grattis!!! Du har framgångsrikt lärt dig hur du lagrar bilder i laravel.

slutsats

nästan alla applikationer kräver lagring av filer på ett eller annat sätt. Efter ovanstående guide bör du kunna lagra bilder och andra filer till den lokala lagringen.All kod som används här finns här på Github.