prawie wszystkie aplikacje mają związek z przesyłaniem plików: zdjęcia profilowego, dokumentu do weryfikacji KYC, dokumentu zawierającego CV itp.

dlatego ważne jest, aby zrozumieć, jak obsługiwać przesyłanie plików w Laravel.

w tym samouczku zbudujemy prosty formularz profilu użytkownika, w którym użytkownik będzie musiał wypełnić swoje dane, a te szczegóły będą obejmować przesłanie zdjęcia profilowego.

na końcu tego samouczka powinieneś być w stanie obsłużyć przesyłanie plików, obsługiwać sprawdzanie poprawności przesyłania plików i wiedzieć, co zrobić, gdy plik nie zostanie pomyślnie przesłany.

Konfigurowanie

aby rozpocząć, Laravel musi być zainstalowany w systemie. Jeśli masz już zainstalowaną aplikację Laravel, możesz pominąć ten krok.

radzę zainstalować Laravel globalnie. Zwłaszcza jeśli planujesz go często używać. Możesz to zrobić, uruchamiając następujące polecenie na terminalu.

composer global require laravel/installer

po zakończeniu, możemy przystąpić do tworzenia nowego projektu Laravel dla tego samouczka.

laravel new profile-form

uruchomienie powyższego polecenia spowoduje utworzenie nowego projektu Laravel w bieżącym katalogu o nazwie profile-form.

obsługuj aplikację, uruchamiając następujące:

cd profile-formphp artisan serve

przejdź do , gdzie znajdziesz aplikację pokazującą domyślną stronę docelową Laravel.

zapisując migrację bazy danych

będziemy musieli utworzyć tabelę użytkowników, która będzie przechowywać dane użytkownika.Laravel jest wysyłany z migracją dla tabeli użytkowników, która znajduje się pod adresem database\migrations14_10_12_000000_create_users_table.php. Zmodyfikuj ten plik, aby wyglądał tak:

tutaj zmodyfikowaliśmy domyślną migrację laravel dla tabeli użytkowników, aby zawierała zdjęcie pola, które będzie przechowywać adres URL do zdjęcia użytkowników.

plik env zawierający poprawne dane bazy danych. Następnie uruchom migracje, uruchamiając następujące polecenie:

php artisan migrate

zaktualizuj model użytkownika, aby odzwierciedlić dodanie pola fotograficznego. Dodaj zdjęcie do $fillable, aby mogło być automatycznie uzupełniane przez laravel podczas tworzenia i aktualizowania użytkownika.

// App\User.phpprotected $fillable = ;

po zakończeniu możemy przystąpić do tworzenia interfejsu formularza profilu.

budując Frontend

będziemy musieli stworzyć system uwierzytelniania, który pozwoli użytkownikowi zarejestrować się i zalogować się do aplikacji.

Utwórz nowy plik w resources / views o nazwie register.blade.php. Dodaj następujące elementy do nowo utworzonego pliku.

do stylizacji używamy Bootstrapa, stąd potrzeba dodania go do górnej części strony. Wypełniliśmy wszystkie wymagane pola, więc użytkownik nie będzie mógł przesłać formularza bez wypełnienia wszystkich pól.

pole, które jest dla nas szczególnie ważne, to pole wprowadzania pliku <input type="file" Update web.php, aby dołączyć drogę do strony rejestracji

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

przechodząc do , pokaże stronę rejestracji zawierającą pola typowe dla formularza rejestracyjnego.

musimy określić typ obsługiwanych plików. Ponieważ chcemy tylko plików graficznych, musimy określić w elemencie wejściowym, że chcemy tylko plików graficznych.

Modfij input:type="file", aby akceptować tylko pliki obrazów, dodając atrybut accept o wartości image/* do znacznika wejściowego.

sekcja zdjęć powinna teraz wyglądać tak:

chociaż formularz wygląda na ustawiony na wysyłanie zdjęć do zaplecza, nie może tego jeszcze zrobić. Musimy powiedzieć formularzowi, że będzie musiał wysłać inny typ danych formularza do zaplecza, w tym przypadku dane binarne.

robimy to dodając atrybut enctypedo elementu formularza i ustawiając jego wartość na multipart/form-data.

znacznik formularza otwarcia powinien wyglądać tak:

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

nastÄ ™ pnie musimy napisaÄ ‡ kontroler do obsĹ ’ ugi uploadu.

zapisywanie kontrolera

nasz backend powinien być w stanie obsłużyć walidację, przechowywanie i przekierowywanie/uwierzytelnianie użytkownika.

Laravel wysyła statki z kontrolerem rejestru, który można znaleźć pod adresem app\Http\Controllers\Auth\RegisterController.php.

Walidacja

metoda validator w kontrolerze rejestru ma za zadanie walidację pól. Zaktualizujmy to, aby odzwierciedlić to, czego naprawdę chcemy.

zmodyfikuj metodę walidatora w kontrolerze RegisterController.php do walidacji wszystkich naszych pól.

pole name powinno być polem wymaganym i ciągiem znaków, stąd zasady walidacji. Podobne dotyczy adresu e-mail i hasła.

pole hasła musi zostać potwierdzone. W interfejsie użytkownika dodaliśmy pole password_confirmation. Z tym jest porównywane pole hasła. Wreszcie pole fotograficzne.

To pole jest wymagane podczas rejestracji. Jest to wymagane, ponieważ w naszej migracji bazy danych, zrobiliśmy to. Gdybyśmy ustawili ją na nullable, nie musielibyśmy ustawiać walidacji na required.

Laravel ma również przydatną regułę walidacji, image, która służy do walidacji plików graficznych (plików z jednym z następujących rozszerzeń: JPEG, png, BMP, gif lub svg).

niektóre inne walidacje, które możesz chcieć przeprowadzić na plikach, to

• zapewnienie, że rozmiar pliku nie jest większy lub mniejszy niż określona ilość. Ta reguła może być dodana jako max:500 lub min:500 zgodnie z wymaganiami. Należy zauważyć, że rozmiar pliku tutaj jest w kilobajtach
• sprawdzanie wymiarów obrazu. Można to zrobić, dodając następujące elementy do tablicy reguł 'dimensions:min_width=100,min_height=200'.

Przechowywanie

następnym krokiem jest przechowywanie obrazu. Stworzymy nową funkcję do obsługi tej funkcjonalności.

istnieje kilka miejsc, w których pliki mogą być przechowywane w aplikacji: mogą być przechowywane w wiadrze s3, Dysku google, a nawet na serwerze aplikacji.

Laravel oferuje wsparcie dla przechowywania plików w tych lokalizacjach. Dla uproszczenia, będziemy przechowywać plik obrazu w aplikacji.

Laravel Request class, Illuminate\Http\Request zapewnia wsparcie dla obsługi plików po wyjęciu z pudełka. Przesłany plik można zapisać za pomocą $request→file(<inputName>)→store(<folderToBeStored>). W naszym przypadku możemy użyć:

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

spowoduje to zapisanie pliku w folderze storage \app\profile. Plik jest zapisywany z losową nazwą, A adres url do pliku jest zwracany.

jeśli chcemy przypisać niestandardową nazwę obrazowi, gdy jest on przechowywany, musimy użyć metody storeAs.

Korzystanie z metody storeAs będzie wyglądać tak

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

rozszerzenie pliku jest ważne, a laravel zapewnia proste sposoby uzyskania rozszerzenia pliku, który został przesłany, za pomocą metody clientExtension.

można go zdobyć, jak pokazano poniżej

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

korzystając z tej metody, możemy zapisać obraz użytkownika na podstawie nazwy użytkownika.

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

w naszym przypadku możemy zrobić to z losowymi nazwami, które Laravel zapisuje nasz plik.

• aby plik był publicznie dostępny, musi być przechowywany w folderze storage/app/public.

• pliki w innych folderach nie będą publicznie dostępne

stwórzmy funkcję, która obsługuje zadanie zapisywania obrazów do magazynu.

pod funkcją walidatora dodaj następującą pozycję

funkcja storeImage przechowuje obraz w folderze storage/app/public/profile i zwraca adres URL do miejsca przechowywania pliku.

składając to wszystko razem

ponieważ dodajemy więcej rzeczy do zrobienia, musimy nadpisać domyślną metodę rejestru dostarczoną nam przez laravel.

Laravel zapewnia cechę dla rejestrujących użytkowników i można ją znaleźć pod adresem Illuminate\Foundation\Auth\RegistersUsers.php.

zaktualizuj Kontroler rejestru, aby zawierał następujące informacje:

jak widać powyżej, funkcja create wykonuje pracę tworzenia użytkownika na podstawie danych, które są do niego wysyłane.

funkcja rejestru jest tam, gdzie wszystko się dzieje. Walidacja jest najpierw przeprowadzana przed jakąkolwiek inną rzeczą.

jeśli Walidacja została przekazana, przechowujemy obraz. Następnie tworzymy użytkownika przekazując wszystkie potrzebne dane w tablicy $data.

jeśli wszystko się powiedzie, uwierzytelniamy użytkownika i przekierowujemy na stronę główną.

wyświetlanie przesłanego zdjęcia

na stronie głównej wyświetlane są wszystkie dane użytkownika. Najpierw stwórzmy dla niego trasę i kontroler.

na terminalu uruchom kod, aby wygenerować Kontroler HomeController.

php artisan make:controller HomeController

przejdź do nowo utworzonego HomeController i dodaj następujące metody do klasy.

w konstruktorze definiujemy, że używamy oprogramowania pośredniczącego auth. To oprogramowanie pośredniczące umożliwia dostęp tylko autoryzowanym użytkownikom do funkcji zdefiniowanych w klasie.

dlatego użytkownik może tu przyjść tylko wtedy, gdy jest uwierzytelniony . Jeśli użytkownik nie jest uwierzytelniony, zostaje przekierowany na stronę logowania.

funkcja show zajmuje się wyświetlaniem strony głównej. Przekazujemy również uwierzytelnionego użytkownika do widoku. Aby dowiedzieć się więcej na ten temat, sprawdź dokumentację laravel.

zaktualizuj plik routes, aby zawierał trasę domową.

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

wreszcie stwórz Dom.blade.plik php w katalogu resources/views.

Dodaj do domublade.php:

w pliku widoku mamy dostęp do danych user, które zostały przekazane z kontrolera.

obecnie używamy obrazu zastępczego, aby pokazać zdjęcie użytkownika, ponieważ zdjęcie nie jest obecnie dla nas dostępne.

musimy utworzyć dowiązanie symboliczne z folderu public/storage do storage/app/public do folderu Laravel ułatwia to, udostępniając polecenie artisan:

php artisan storage:link

po wykonaniu tej czynności zaktualizuj znacznik obrazu, aby wyświetlić obraz profilowy.

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

Gratulacje!!! Z powodzeniem nauczyłeś się, jak przechowywać obrazy w laravel.

wniosek

prawie wszystkie aplikacje wymagają przechowywania plików w taki czy inny sposób. Postępując zgodnie z powyższym przewodnikiem, powinieneś być w stanie przechowywać obrazy i każdy inny plik w lokalnej pamięci masowej.Cały kod użyty tutaj można znaleźć tutaj na Github.