[MUSIC]
I caricamenti di file sono una funzionalità comune supportata da molti server.
Quindi, quando compili un modulo, ad esempio, potresti avere un campo
in cui compilare un nome di file e quindi caricare quel file sul lato server.
Ad esempio,
supponiamo di caricare le informazioni su un piatto sul lato server.
Quindi vorrai anche caricare l'immagine corrispondente del piatto
sul lato server.
Quindi, nel processo, caricerai prima l'immagine del piatto sul lato server,
otterrai un URL per
quell'immagine dal lato server ovunque venga caricata e archiviata,
quindi userai quell'immagine nel documento JSON che descrive il piatto in dettaglio.
In modo che successivamente, quando i client recuperano il documento JSON che descrive il piatto per rendere l'interfaccia utente, quindi, dall'interno del documento JSON, saranno
in grado di ottenere l'URL dell'immagine del piatto che è stata caricata sul lato server.
E poi usarlo nella costruzione dell'interfaccia utente.
Quindi, negli esempi che abbiamo visto finora, quando abbiamo guardato i dettagli di
un piatto, abbiamo visto che c'è un'immagine riempita lì, che è una stringa,
che non è altro che l'URL di quell'immagine corrispondente a quel piatto specifico.
O la promozione o il lettore come abbiamo costruito nel nostro server API REST.
Ora, in questa lezione, impareremo di più sul caricamento dei file.
Come è supportato in un server?
E poi come possiamo sfruttare un modulo nodo
che ci permette di supportare il caricamento dei file.
I caricamenti di file sono in genere supportati tramite un input di modulo.
Quindi, in un input, se si specifica il tipo come file e
il nome come il nome del campo lì,
allora si sarebbe in grado di fornire il file che verrà caricato
quando si fa clic su quel pulsante di invio per questo particolare modulo qui.
Ora, quando le informazioni del file vengono caricate sul lato server,
i dati del modulo stesso sono in genere codificati come
application/x-www-form-urlencoded o multipart/form-data.
Quindi progetti il tuo modulo, ad esempio, progetterai il tuo modulo con
l'azione impostata su/imageUpload all'inclinazione dell'API REST,
che fungerà da punto finale a cui esegui il post dell'immagine.
In modo che il metodo corrispondente sia post e il tipo di codifica,
lo imposti su multipart/form-data all'interno del modulo.
Quindi questo significa che gli elementi del modulo verranno codificati nel tipo di codifica
e quindi caricati sul lato server.
Il caricamento dei file è più efficiente con multipart/form-data.
E quindi, questo è l'approccio preferito che usiamo per caricare file.
Ora, se vuoi saperne di più sul caricamento di file e il caricamento del
modulo e l'applicazione/x-www-form-urlencoded o
il multipart/form-data, puoi leggere l'HTML5
(Raccomandazione W3C) in cui vengono forniti i dettagli, e
anche la corrispondente richiesta IETF per commentato documenti.
Ho collegamenti a questi nelle risorse aggiuntive nel caso in cui si desideri leggere di più
sui dettagli effettivi di come questi tipi di codifica dei moduli sono supportati.
Dal nostro punto di vista, quando usiamo il multipart/form-data,
quando questo è incluso in un
messaggio di richiesta HTTP che sta andando sul lato server, quindi nell'intestazione del messaggio di richiesta,
si avrà un tipo di contenuto impostato su multipart/form-data.
E poi anche un valore limite impostato in questo modo.
Il limite separa le più parti del corpo della richiesta.
Quindi il corpo della richiesta stesso del messaggio di richiesta in uscita sarà
diviso in più parti.
E ogni parte sarà delineata dalla parte precedente
utilizzando questo limite qui.
Ora, per illustrarvi ulteriormente i dettagli, ho truccato
il server per stampare queste informazioni dal messaggio di richiesta in arrivo.
In modo che possiamo esaminare questo in modo un po 'più dettagliato.
Dando un'occhiata ai dettagli per
un messaggio specifico che ho inviato dal mio postino al lato server,
puoi notare che qui, ho stampato le intestazioni delle richieste qui.
E in particolare, nell'intestazione della richiesta, vorrei attirare la vostra attenzione su questa intestazione
qui, chiamata tipo di contenuto, che è impostata su multipart/form-data.
E poi nota in particolare il limite definito qui
con questo numero lungo qui dentro.
Quindi questa è l'intestazione della richiesta per
il messaggio di richiesta in arrivo che ho pubblicato usando il metodo post.
In realtà, questo è esattamente il messaggio di richiesta che userò
nell'esercizio che segue questa lezione per caricare il file.
Quindi, quando cariciamo quel file lì, va bene, noterai che
nel corpo della richiesta, quindi questo è dove stampa il corpo della richiesta qui sotto.
E nel corpo della richiesta,
noterai che stampa questa particolare linea qui.
E questo corrisponde al confine che è specificato qui.
Quindi questo limite specifica essenzialmente la separazione tra le varie parti
del corpo multiparte che fa parte di questo messaggio di richiesta.
Quindi nel corpo della richiesta, vedrai che questo viene definito qui.
Inoltre, si specificherà anche lo stesso Content-Disposition come form-data,
quindi lo interpreteranno come dati del modulo e
il nome corrispondente a s ImageFile.
E il nome del file stesso dal lato client che è stato caricato,
il nome del file stesso è dato qui.
E poi sotto dice Content-Type: image/png.
Quindi sto caricando questo file immagine PNG qui.
Quindi questo è il dettaglio che è descritto qui.
E mentre scorri verso il basso nel corpo della richiesta stesso,
vedrai i dettagli di ciò che è incluso nel corpo della richiesta.
Quindi questo all'interno del file PNG qui, vedrai queste informazioni nel file PNG.
Quindi, se apri il file PNG, questo è ciò che vedresti qui.
Quindi questo contiene un sacco di caratteri qui,
che ovviamente sullo schermo non possono essere stampati.
Quindi, mentre scorri verso il basso, questo intero insieme di informazioni,
che è in realtà ciò che è contenuto nel corpo della richiesta del
messaggio di richiesta che sta caricando questo particolare file sul lato server.
Quindi vedi che quel corpo contiene effettivamente la versione codificata
dell'immagine lì.
E questa è la fine del confine per quel corpo di richiesta.
Quindi nel nostro messaggio di richiesta, abbiamo solo un file incluso qui.
Puoi anche caricare più file se lo desideri.
Ma poi, è necessario configurare il modulo npm in modo appropriato per
accettare più file.
Quindi, questo è il modo in cui il corpo
della richiesta stesso contiene la versione codificata dell'immagine, da cui il server estrarrà l'immagine
e quindi la salverà nel file con lo stesso nome di file sul lato server.
Quindi questo è il modo in cui configureremo la nostra applicazione, l'applicazione lato server,
da fare nell'esercizio che segue questa lezione.
Quindi ho pensato che sarebbe stato un
passo interessante per illustrarti esattamente cosa sta ricevendo il mio server.
E così questo dirà perché stiamo specificando questo confine qui.
E come, all'interno del corpo della richiesta stesso,
stiamo usando il limite per delineare le varie parti del corpo della richiesta.
Quindi il lato server, quando elabora,
sarà in grado di estrarre i dati dell'immagine dal corpo della richiesta in modo appropriato
e quindi salvare il file immagine sul lato server.
Quindi, proprio come ho illustrato nel terminale
lì che il limite separa la parte della richiesta multipass.
E così hai visto il limite specificato lì.
Per lavorare con i dati del modulo multipart contenuti nel corpo della richiesta,
useremo un modulo NPR che supporta l'elaborazione dei
dati del modulo multipart inclusi all'interno del corpo della richiesta.
Estrarrà automaticamente tutto per te,
quindi lo caricherà su due oggetti sull'oggetto richiesta sul lato server.
Quindi questo modulo npm chiamato Multer, che quando installato
sull'applicazione lato server e
configura il tuo server express per utilizzare Multer.
Quindi si sarà in grado di elaborare il messaggio di richiesta in arrivo che
contiene questo multipart/form-data nel messaggio di richiesta.
Quindi Multer è il modulo nodo in cui questo
aiuterà il server a gestire multipart/form-data.
Questo è scritto sopra un altro modulo npm chiamato busboy.
Busboy è un modulo che elabora i dati del modulo HTML in entrata, dati generali del modulo HTML.
E un particolare, Multer porta su busboy per consentirti di
elaborare multipart/form-data sul tuo lato server.
Ora, quando analizza queste informazioni, Multer
caricherà i dati del modulo in entrata e aggiunge un oggetto corpo al req.
Quindi avrai un oggetto req.body e anche un oggetto req.file.
Se si carica un singolo file, allora continuerà oggetto req.file.
Quindi, se imposti Multer per accettare più caricamenti di file,
puoi impostare l'oggetto req.files.
L' oggetto file sarà un array che contiene tutte le informazioni per
ogni particolare file che viene caricato sul lato server.
L' oggetto file contiene informazioni che riepilogano
il modo in cui il file viene salvato sul lato server da Multer.
Con questa rapida comprensione di come funziona il caricamento dei file,
passiamo all'esercizio in cui configureremo effettivamente il modulo Multer.
E poi usalo all'interno della nostra applicazione espressa per gestire i caricamenti di file
dal lato client.
[ MUSIC]