Articles

Gestione dei caricamenti di file in Laravel – CodeSource.io

Quasi tutte le applicazioni hanno a che fare con il caricamento di file di qualche tipo: un’immagine del profilo, un documento per la verifica KYC, un documento contenente CV, ecc.

Quindi, è importante capire come gestire i caricamenti di file in Laravel.

In questo tutorial, ci accingiamo a costruire un semplice modulo profilo utente, in cui l’utente dovrà compilare i suoi dettagli e questi dettagli includerà l’invio di una foto del profilo.

Alla fine di questo tutorial, dovresti essere in grado di gestire i caricamenti di file, gestire la convalida del caricamento di file e sapere cosa fare quando il file non viene caricato correttamente.

Impostazione

Per iniziare, Laravel deve essere installato sul sistema. Se hai già installato Laravel, puoi saltare questo passaggio.

Vorrei consigliare di installare Laravel a livello globale. Soprattutto se hai intenzione di usarlo spesso. È possibile farlo eseguendo il seguente comando su un terminale.

composer global require laravel/installer

Una volta completato, possiamo andare avanti per creare un nuovo progetto Laravel per questo tutorial.

laravel new profile-form

L’esecuzione del comando precedente creerà un nuovo progetto Laravel nella directory corrente chiamata profile-form.

Servire l’applicazione eseguendo il seguente:

cd profile-formphp artisan serve

Vai a dove troverai la tua app che mostra la pagina di destinazione predefinita di Laravel.

Scrivendo la migrazione del database

Avremo bisogno di creare una tabella utenti che memorizzerà i dettagli dell’utente.Laravel viene fornito con una migrazione per la tabella utenti che può essere trovata in database\migrations14_10_12_000000_create_users_table.php. Modifica quel file in modo che assomigli a questo:

Qui, abbiamo modificato la migrazione predefinita di laravel per la tabella degli utenti per includere una foto di campo che memorizzerà l’URL per la fotografia degli utenti.

Modificare il .file env per includere i dettagli del database corretti. Quindi eseguire le migrazioni eseguendo il seguente comando:

php artisan migrate

Aggiornare il modello utente per riflettere l’aggiunta del campo foto. Aggiungi foto a $fillable in modo che possa essere compilata automaticamente da laravel durante la creazione e l’aggiornamento di un utente.

// App\User.phpprotected $fillable = ;

Una volta fatto ciò, possiamo procedere a costruire il frontend del modulo profilo.

Costruire il Frontend

Avremo bisogno di creare un sistema di autenticazione che permetterà all’utente di registrarsi e accedere all’applicazione.

Crea un nuovo file in risorse/viste chiamato register.blade.php. Aggiungere quanto segue al file appena creato.

Stiamo usando bootstrap per lo styling, da qui la necessità di aggiungerlo alla sezione superiore della pagina. Abbiamo fatto tutti i campi richiesti qui in modo che l’utente non sarà in grado di inviare il modulo senza riempire tutti i campi.

Il campo che è particolarmente importante per noi qui è il campo di input del file <input type="file" Aggiorna web.php per includere la rotta alla pagina di registro

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

Andando a mostrer la pagina di registro contenente i campi che sono tipici di un formulario di registrazione.

Modulo di caricamento file

È necessario specificare il tipo di file supportati. Poiché vogliamo solo file di immagine, dobbiamo specificare nell’elemento di input che vogliamo solo file di immagine.

Modfiy input:type="file" per accettare solo i file di immagine aggiungendo l’attributo accept con un valore di image/* al tag di input.

La sezione fotografia dovrebbe ora piacere:

Mentre il modulo sembra impostato per inviare immagini al backend, non può ancora farlo. Dobbiamo dire al modulo che dovrà inviare un altro tipo di dati del modulo al backend, in questo caso dati binari.

Lo facciamo aggiungendo l’attributo enctypeall’elemento form e impostando il suo valore su multipart/form-data.

Il tag del modulo di apertura dovrebbe essere simile:

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

Successivamente, dobbiamo scrivere il controller per gestire il caricamento.

Scrivendo il Controller

Il nostro backend dovrebbe essere in grado di gestire la convalida, la memorizzazione e il reindirizzamento/autenticazione dell’utente.

Laravel viene fornito con un RegisterController che può essere trovato su app\Http\Controllers\Auth\RegisterController.php.

Convalida

Il metodo validator nel Controller del registro ha la responsabilità di convalidare i campi. Quindi aggiorniamolo per riflettere ciò che effettivamente vogliamo.

Modificare il metodo del validatore in RegisterController.php per convalidare tutti i nostri campi.

Il campo nome dovrebbe essere un campo obbligatorio e una stringa, quindi le regole di convalida. Simile vale per e-mail e password.

Il campo password deve essere confermato. Nel frontend, abbiamo aggiunto un campo per password_confirmation. Questo è ciò con cui viene confrontato il campo password. Infine il campo fotografico.

Questo campo è obbligatorio al momento della registrazione. È necessario perché nella nostra migrazione del database, l’abbiamo fatto così. Se avessimo impostato su nullable, non avremmo bisogno di impostare la convalida su required.

Laravel ha anche una pratica regola di convalida, image, che viene utilizzata per convalidare i file immagine (file con una delle seguenti estensioni: jpeg, png, bmp, gif o svg).

Qualche altra convalida che potresti voler eseguire sui file è

  • Garantendo che la dimensione del file non sia maggiore o minore di una quantità specifica. Questa regola può essere aggiunta come max:500 o min:500 come richiesto. Va notato che la dimensione del file qui è in kilobyte
  • Controllando le dimensioni dell’immagine. Questo può essere fatto aggiungendo quanto segue all’array di regole 'dimensions:min_width=100,min_height=200'.

Memorizzazione di

Il passo successivo è la memorizzazione dell’immagine. Creeremo una nuova funzione per gestire questa funzionalità.

Ci sono diversi luoghi in cui i file possono essere memorizzati in un’applicazione: potrebbero essere memorizzati in un bucket s3, Google Drive o anche nel server delle applicazioni.

Laravel viene fornito con il supporto per la memorizzazione di file su queste posizioni. Per semplicità, memorizzeremo il file immagine nell’applicazione.

Laravel Request class, Illuminate\Http\Request fornisce il supporto per la gestione dei file fuori dalla scatola. Il file caricato può essere memorizzato tramite $request→file(<inputName>)→store(<folderToBeStored>). Per il nostro caso, potremmo usare:

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

Questo memorizza il file nella cartella storage \app\profile. Il file viene salvato con un nome casuale e viene restituito l’URL del file.

Se vogliamo assegnare un nome personalizzato all’immagine mentre viene memorizzata, dobbiamo usare il metodo storeAs.

Utilizzando il metodo storeAs sarà simile a

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

L’estensione del file è importante e laravel fornisce semplici modi per ottenere l’estensione del file che è stato caricato, tramite il metodo clientExtension.

Può essere ottenuto come mostrato di seguito

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

Utilizzando questo metodo, possiamo salvare l’immagine di un utente in base al nome dell’utente.

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

Nel nostro caso, possiamo accontentarci dei nomi casuali che laravel salva il nostro file.

  • Affinché il file sia accessibile pubblicamente, deve essere memorizzato nella cartella storage/app/public.
  • I file in altre cartelle non saranno disponibili al pubblico

Creiamo una funzione che gestisce il compito di salvare le immagini nella memoria.

Sotto la funzione validator, aggiungere quanto segue

La funzione storeImage memorizza l’immagine nella cartella storage/app/public/profile e restituisce un URL alla posizione di archiviazione del file.

Mettere tutto insieme

Poiché stiamo aggiungendo più cose da fare, dobbiamo sovrascrivere il metodo di registro predefinito fornito da laravel.

Laravel fornisce un tratto per la registrazione degli utenti e può essere trovato in Illuminate\Foundation\Auth\RegistersUsers.php.

Aggiorna il controller del registro per includere quanto segue:

Come visto sopra, la funzione create fa il lavoro di creare un utente in base ai dati che vengono inviati ad esso.

La funzione di registro è dove tutto accade. La convalida viene eseguita prima di qualsiasi altra cosa.

Se la convalida viene passata, memorizziamo l’immagine. Dopo che è fatto, creiamo l’utente passando tutti i dati necessari in un array, $data.

Se tutto accade con successo, autentichiamo l’utente e reindirizziamo alla home page.

Mostrando l’immagine caricata

La home page è dove verranno visualizzati tutti i dettagli dell’utente. Innanzitutto, creiamo un percorso e un controller per questo.

Sul terminale, eseguire il codice per generare il HomeController.

php artisan make:controller HomeController

Vai alla nuova creazione HomeController e aggiungi i seguenti metodi alla classe.

Nel costruttore, definiamo che stiamo usando il middleware auth. Ciò che fa questo middleware è che consente solo agli utenti autorizzati di accedere alle funzioni definite nella classe.

Quindi, l’utente può venire qui solo se è autenticato. Se l’utente non è autenticato, viene reindirizzato alla pagina di accesso.

La funzione mostra gestisce la visualizzazione della home page. Stiamo passando anche l’utente autenticato alla vista. Per ulteriori informazioni su questo, controlla la documentazione di laravel.

Aggiorna il file routes per contenere il percorso home.

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

Finalmente creare una casa.lama.file php nella directory resources/views.

Aggiungi quanto segue a home.lama.php:

Nel file di visualizzazione, abbiamo accesso ai dati user che sono stati passati dal controller.

Attualmente stiamo utilizzando un’immagine segnaposto per mostrare la foto dell’utente perché la foto non è attualmente disponibile per noi.

Abbiamo bisogno di creare un collegamento simbolico da public/storage a storage/app/public cartella per Laravel rende questo semplice fornendo il comando artisan:

php artisan storage:link

Dopo averlo fatto, aggiorna il tag immagine per mostrare l’immagine del profilo.

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

Congratulazioni!!! Hai imparato con successo come memorizzare le immagini in laravel.

Conclusione

Quasi tutte le applicazioni richiedono la memorizzazione di file in un modo o nell’altro. Seguendo la guida di cui sopra, si dovrebbe essere in grado di memorizzare le immagini e qualsiasi altro file nella memoria locale.Tutto il codice utilizzato qui può essere trovato qui su Github.