Articles

Fájlfeltöltések kezelése Laravelben – CodeSource.io

szinte minden alkalmazás valamilyen fájl feltöltéséhez kapcsolódik: profilkép, KYC-ellenőrzésre szolgáló dokumentum, önéletrajzot tartalmazó dokumentum stb.

ezért fontos megérteni, hogyan kell kezelni a fájlfeltöltéseket a Laravelben.

ebben az oktatóanyagban egy egyszerű felhasználói profil űrlapot fogunk készíteni, ahol a felhasználónak ki kell töltenie az adatait, és ezek a részletek tartalmazzák a profilkép elküldését.

az oktatóanyag végén képesnek kell lennie a fájlfeltöltések kezelésére, a fájlfeltöltés érvényesítésére, és tudnia kell, mit kell tennie, ha a fájl nem kerül sikeresen feltöltésre.

Beállítás

az induláshoz a Laravel-t telepíteni kell a rendszerre. Ha a Laravel már telepítve van, kihagyhatja ezt a lépést.

azt tanácsolom, hogy telepítse Laravel globálisan. Különösen, ha azt tervezi, hogy gyakran használja. Ezt úgy teheti meg, hogy a következő parancsot futtatja egy terminálon.

composer global require laravel/installer

miután ez befejeződött, folytathatjuk egy új Laravel projekt létrehozását ehhez az oktatóanyaghoz.

laravel new profile-form

a fenti parancs futtatása új Laravel projektet hoz létre az aktuális könyvtárban, profile-form néven.

szolgálja az alkalmazás futtatásával a következő:

cd profile-formphp artisan serve

keresse meg a pontot, ahol az alkalmazás az alapértelmezett Laravel céloldalt mutatja.

Adatbázis-áttelepítés írása

létre kell hoznunk egy felhasználói táblát, amely tárolja a felhasználói adatokat.Laravel hajók a migráció a felhasználók tábla, amely megtalálható a database\migrations14_10_12_000000_create_users_table.php. Módosítsa a fájlt úgy, hogy így nézzen ki:

itt módosítottuk az alapértelmezett laravel migrációt a felhasználók táblához, hogy tartalmazzon egy mezőfotót, amely tárolja az URL-t a felhasználók fényképéhez.

módosítsa a .env fájl tartalmazza a megfelelő adatbázis adatait. Ezután futtassa az áttelepítéseket a következő parancs futtatásával:

php artisan migrate

frissítse a felhasználói modellt, hogy tükrözze a fotómező hozzáadását. Add hozzá a fotót a $fillable – hez, így a laravel automatikusan kitöltheti a felhasználó létrehozásakor és frissítésekor.

// App\User.phpprotected $fillable = ;

miután ez megtörtént, folytathatjuk a profil űrlap előlapjának felépítését.

a Frontend felépítése

létre kell hoznunk egy hitelesítési rendszert, amely lehetővé teszi a felhasználó számára, hogy regisztráljon és bejelentkezzen az alkalmazásba.

hozzon létre egy új fájlt az erőforrásokban/nézetekben, amelynek neve register.blade.php. Adja hozzá a következőket az újonnan létrehozott fájlhoz.

a bootstrap-ot használjuk a stílushoz, ezért hozzá kell adni az oldal felső részéhez. Elkészítettük az összes szükséges mezőt, így a felhasználó nem tudja elküldeni az űrlapot az összes mező kitöltése nélkül.

a számunkra különösen fontos mező a <input type="file" Update web fájlbeviteli mező.php, hogy tartalmazza az útvonalat, hogy a regisztrációs oldal

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

megy megmutatja a regisztrációs oldalt tartalmazó mezőket, amelyek jellemzőek a regisztrációs űrlapot.

fájl feltöltési űrlap

meg kell adnunk a támogatott fájlok típusát. Mivel csak képfájlokat akarunk, a bemeneti elemben meg kell adnunk, hogy csak képfájlokat akarunk.

Modfiy a input:type="file" csak képfájlok elfogadásához adja hozzá az accept attribútumot, amelynek értéke image/* a bemeneti címkéhez.

a fénykép rész most tetszik:

míg az űrlap úgy néz ki, hogy képeket küld a háttérbe, még nem tudja megtenni. Meg kell mondanunk az űrlapnak, hogy más típusú űrlapadatokat kell küldenie a háttérbe, ebben az esetben bináris adatokat.

ezt úgy végezzük, hogy a enctypeattribútumot hozzáadjuk az űrlap elemhez, és az értékét multipart/form-data értékre állítjuk.

a nyitó űrlapcímkének így kell kinéznie:

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

ezután meg kell írnunk a vezérlőt a feltöltés kezeléséhez.

a vezérlő írása

a háttérprogramnak képesnek kell lennie a felhasználó érvényesítésének, tárolásának és átirányításának/hitelesítésének kezelésére.

a Laravel Registercontrollerrel szállít, amely a app\Http\Controllers\Auth\RegisterController.php címen található.

validálás

a Regisztervezérlőben a validator módszer feladata a mezők validálása. Frissítsük tehát, hogy tükrözze azt, amit valójában akarunk.

módosítsa a validator metódust a Registercontrollerben.php érvényesíteni minden területen.

a név mezőnek kötelező mezőnek és karakterláncnak kell lennie, ezért az érvényesítési szabályok. Ugyanez vonatkozik az e-mailre és a jelszóra is.

a jelszó mezőt meg kell erősíteni. A frontend, adtunk egy mezőt password_confirmation. Ezzel hasonlítják össze a jelszó mezőt. Végül a fotómező.

ez a mező a regisztrációhoz szükséges. Ez azért szükséges, mert az adatbázisunkban migráció, így tettük. Ha nullázhatónak állítottuk volna be, akkor nem kellene az érvényesítést kötelezőre állítanunk.

a Laravelnek van egy praktikus érvényesítési szabálya, az image, amely a képfájlok (a következő kiterjesztések bármelyikével rendelkező fájlok) érvényesítésére szolgál: jpeg, png, bmp, gif vagy svg).

néhány más érvényesítés, amelyet érdemes elvégezni a fájlokon, a

  • annak biztosítása, hogy a fájlméret ne legyen nagyobb vagy kisebb, mint egy adott összeg. Ez a szabály szükség szerint hozzáadható max:500 vagy min:500 néven. Meg kell jegyezni, hogy a fájlméret itt kilobájtban
  • a kép méreteinek ellenőrzése. Ezt úgy teheti meg, hogy a 'dimensions:min_width=100,min_height=200'szabályok tömbjéhez hozzáadja a következőket.

Tárolás

a következő lépés a kép tárolása. Létrehozunk egy új funkciót ennek a funkciónak a kezelésére.

számos helyen tárolhatók fájlok egy alkalmazásban: tárolhatók egy s3 vödörben, a google drive-ban vagy akár az alkalmazáskiszolgálón.

a Laravel támogatja a fájlok tárolását ezeken a helyeken. Az egyszerűség kedvéért a képfájlt az alkalmazásban tároljuk.

Laravel Request class, Illuminate\Http\Request támogatja a fájlkezelést a dobozból. A feltöltött fájl $request→file(<inputName>)→store(<folderToBeStored>) – on keresztül tárolható. A mi esetünkben használhatnánk:

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

ez a fájlt a storage \app\profile mappában tárolja. A fájl véletlenszerű névvel kerül mentésre, majd a fájl url-címe kerül visszaadásra.

ha egyéni nevet akarunk rendelni a képhez a tárolás során, akkor a storeAs módszert kell használnunk.

a storeAs metódus használatával

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

a fájlkiterjesztés fontos, a laravel pedig egyszerű módszereket kínál a feltöltött fájl kiterjesztésének megszerzésére a clientExtension módszerrel.

meg lehet ütött az alábbiak szerint

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

ezzel a módszerrel menthetjük a felhasználó kép alapján a felhasználó nevét.

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

a mi esetünkben, meg tudjuk csinálni a véletlen nevek, amelyek laravel menti a fájlt.

  • a fájl nyilvános eléréséhez a storage/app/public mappában kell tárolni.
  • a más mappákban lévő fájlok nem lesznek nyilvánosan elérhetők

hozzunk létre egy funkciót, amely kezeli a képek tárolóba mentésének feladatát.

a validator függvény alatt adja hozzá a következő

a storeImagefüggvény a képet a storage/app/public/profile mappában tárolja, és visszaad egy URL-t a fájl tárolási helyére.

mindent összerakva

mivel további tennivalókat adunk hozzá, felül kell írnunk a laravel által biztosított alapértelmezett regiszter metódust.

a Laravel egy tulajdonságot biztosít a felhasználók regisztrálásához, és megtalálható a Illuminate\Foundation\Auth\RegistersUsers.php címen.

frissítse a Regisztervezérlőt, hogy az a következőket tartalmazza:

mint fent látható, a létrehozás funkció a felhasználó létrehozását végzi a neki küldött adatok alapján.

a regiszter funkció az, ahol minden történik. Az érvényesítést először bármely más dolog előtt hajtják végre.

ha az érvényesítés sikeres, akkor a képet tároljuk. Miután ez megtörtént, létrehozzuk a felhasználót az összes tömbben szükséges adat átadásával, $data.

ha minden sikeresen történik, hitelesítjük a felhasználót, és átirányítjuk a kezdőlapra.

a feltöltött kép megjelenítése

a kezdőlap az, ahol az összes felhasználói adatot megjelenítjük. Először hozzunk létre egy útvonalat és vezérlőt.

a terminálon futtassa a kódot a HomeController létrehozásához.

php artisan make:controller HomeController

LÉPJEN az újonnan létrehozott HomeController elemre, és adja hozzá az alábbi metódusokat az osztályhoz.

a konstruktorban meghatározzuk, hogy az auth köztes szoftvert használjuk. Ez a köztes szoftver az, hogy csak az engedélyezett felhasználók számára teszi lehetővé az osztályban meghatározott funkciók elérését.

ezért a felhasználó csak akkor jöhet ide, ha hitelesített. Ha a felhasználó nincs hitelesítve, átirányítja a bejelentkezési oldalra.

a show funkció kezeli a Kezdőlap megjelenítését. A hitelesített felhasználót is átadjuk a nézetnek. Ha többet szeretne megtudni erről, ellenőrizze a laravel dokumentációját.

frissítse az útvonalfájlt, hogy tartalmazza az otthoni útvonalat.

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

végül hozzon létre egy otthont.penge.php fájl a resources/views könyvtárban.

adja hozzá a következőket a Kezdőlaphoz.penge.php:

a nézetfájlban hozzáférhetünk a vezérlő által átadott user adatokhoz.

jelenleg helyőrző képet használunk a felhasználó fényképének megjelenítéséhez, mert a fénykép jelenleg nem áll rendelkezésünkre.

létre kell hoznunk egy szimbolikus link public/storage a storage/app/public mappát Laravel teszi ezt egyszerű azáltal, hogy a kézműves parancs:

php artisan storage:link

ezt követően frissítse a képcímkét a profilkép megjelenítéséhez.

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

gratulálok!!! Sikeresen megtanulta, hogyan tárolja a képeket laravelben.

következtetés

szinte minden alkalmazás megköveteli a fájlok ilyen vagy olyan módon történő tárolását. A fenti útmutatót követve képesnek kell lennie arra, hogy képeket és bármilyen más fájlt tároljon a helyi tárolóban.Az itt használt összes kód itt található a Githubon.