Nella lezione precedente,
abbiamo appreso come i caricamenti di file sono
supportati attraverso l'approccio dati multi-piattaforma.
In questo esercizio, faremo uso del modulo Multer,
cui abbiamo fatto riferimento nella lezione per consentire al nostro server espresso di
supportare il caricamento di file immagine nel nostro sito server.
Essi memorizzeranno questi file di immagini nella cartella pubblica/images.
Queste immagini sarebbero utili all'interno della nostra applicazione quando forniamo
immagini per i vari piatti o i radar o le promozioni,
che abbiamo costruito nel nostro server API REST.
Per iniziare con questo esercizio,
il primo passo, ovviamente,
è installare il modulo Multer in modo che al prompt digiti npm installa
multer meno save e al momento sto usando multer 1.3.1 in questo corso.
Quindi, una volta installato il modulo multer,
andiamo al nostro progetto e poi implementiamo un nuovo percorso che ci permette di caricare i file.
Vai nel progetto nella cartella route,
aggiungiamo un nuovo file denominato upload router.js.
Questo router, router express che stiamo per implementare qui,
è quello che sta per supportare il caricamento dei file.
Quindi, nel router di caricamento lasciami andare
al router piatto e copiare queste prime cose dal router piatto
perché abbiamo praticamente intenzione di impostare una
struttura simile nella nostra applicazione o il router di caricamento.
Quindi, lasciami copiare quella parte e poi lo modificheremo.
Quindi, nel router di caricamento,
non ho bisogno di mangusta, quindi ho intenzione di rimuovere mangusta e non ho bisogno nemmeno dei piatti.
Quindi, quei due sarebbero stati rimossi e dopo di che
abbiamo bisogno di esprimere il parser del corpo e autenticare.
Ora, ho intenzione di richiedere il modulo multer qui.
Una volta che includiamo il modulo multer,
ora questo router ho intenzione di chiamare questo come router di caricamento.
Quindi, dirà upload router usa body parser e
poi questo tranne il router di caricamento e di nuovo,
ricordati di dire esportazioni di moduli, carica router qui.
Quindi, per il percorso dei router di caricamento,
abbiamo bisogno di aggiungere i vari metodi.
Lo farò un po 'più tardi, ma prima di questo impostiamo
multer per consentirci di caricare i file.
Ora, per impostazione predefinita, multer può essere configurato semplicemente usando multer all'interno della nostra applicazione,
ma ho intenzione di fare qualche configurazione di multer in
questo esercizio in modo che abbiamo
intenzione di personalizzare il modo in cui multer gestisce il caricamento dei file.
Quindi, per usare il multer,
una delle opzioni che Multer prende è per lo storage.
Quindi, multer fornisce questa funzione di archiviazione su disco che
ci permette di definire il motore di archiviazione e qui possiamo configurare alcune cose.
Ora, se si tratta solo di configurare la destinazione,
si può semplicemente dire i due punti principali
e quindi specificare la cartella di destinazione all'interno della quale verranno memorizzati i file caricati.
Ma qui ho intenzione di fare qualche ulteriore configurazione per il modulo multer qui.
Quindi, questo è dove ho intenzione di utilizzare il supporto di archiviazione su disco multer.
All' interno dello storage su disco,
posso definire un paio di opzioni qui.
Le opzioni che definirò saranno di
destinazione e la seconda è il nome del file.
Quindi, due configurazioni che ho intenzione di fornire allo storage su disco.
La destinazione come ci si aspetterebbe,
mi permette di configurare la destinazione e questo prende
come configurazione qui una funzione.
Quindi, la destinazione è configurata come una funzione qui.
Questa funzione riceverà richiesta e anche un oggetto chiamato il file,
che contiene informazioni sul file che è
stato elaborato da multer e anche una funzione di callback.
Quindi, cb è la funzione di callback.
Quindi, qui per la destinazione,
sto per dire cb null,
il secondo parametro è la cartella di destinazione,
che può essere espressa come una stringa in cui verranno memorizzati i file.
Quindi, qui dentro, forniro' la destinazione come immagini di barra pubblica.
Perché in questo esercizio ho intenzione di supportare i caricamenti di immagini.
Quindi, questa è la parte che ho intenzione di specificare qui, quindi caricare l'immagine.
Quindi, la funzione di callback come vedi richiede due parametri.
Il primo è, ovviamente,
l'errore che in questo caso lo imposterò su
null e il secondo è la cartella di destinazione,
in cui verranno memorizzate le mie immagini.
Quindi, posso configurarlo dicendo immagini di barra pubblica.
Quindi, nella cartella delle immagini,
i file che carico verranno memorizzati.
Anche per il nome del file,
ottiene i tre parametri, il
messaggio di richiesta, il file e la funzione di callback.
Dalla configurazione del modo in cui viene chiamata la funzione di callback,
possiamo specificare le informazioni sul nome del file.
Quindi, per la funzione di callback direi cb null e non c'è errore qui.
Quindi il secondo insiste sul nome del file,
che verrà utilizzato per il file specifico che
è stato appena caricato, come verrà memorizzato.
Quindi, questo oggetto file che ho ottenuto qui,
supporta un insieme di diverse proprietà su di esso.
Una delle proprietà è chiamata, nome originale.
Quindi, il nome originale essenzialmente,
ci dà il nome originale del file dal lato client che è stato caricato.
Insisto sul fatto che, quando il file viene salvato sul lato server,
al file verrà assegnato esattamente lo
stesso nome del nome originale del file che è stato caricato.
In modo da poter sapere che sto caricando
esattamente lo stesso file e sul lato server quando
il file viene caricato verrà memorizzato con lo stesso nome.
Ora, se non lo configuri,
multer per impostazione predefinita darà una stringa casuale
come nome del file senza estensioni.
Quindi, che potrebbe non essere qualcosa che saresti felice
di utilizzare in questo particolare esercizio.
Quindi, ecco perché sto configurando esplicitamente dicendo che,
il file dovrebbe essere memorizzato con il nome originale del file che è stato caricato.
Ci sarà di nuovo incontrare questo oggetto file in
un po 'più dettaglio e vedere come
possiamo fare uso di informazioni dall'oggetto file un po 'più tardi.
Inoltre, posso anche specificare un filtro file qui per la configurazione multers.
Il filtro file mi permetterà di specificare quale tipo di file
sono disposto a caricare o che sono disposto ad accettare per il caricamento.
Quindi, per fare questo imposterò un'altra funzione chiamata
filtro file immagine const
e questa definirò la funzione in un minuto.
Ora, per questo, posso anche salvare questo come
const storage perché abbiamo usato const per tutto,
quindi, dirò solo const storage.
Per il filtro file immagine,
dirò filtro file immagine const.
Ancora una volta, riceve tre parametri richiesta,
oggetto, l'oggetto file che contiene le informazioni
sul file che è stato caricato e la funzione di callback qui.
Attraverso la funzione di callback,
passerò le informazioni alla mia configurazione multer che
mi consente di specificare come memorizzerò queste informazioni.
Quindi, questa sarà una funzione freccia qui.
All' interno di questa funzione freccia ciò che controllerò è che,
dirò se non il nome originale del file corrisponde.
Quindi, il nome originale è una stringa qui.
Quindi, sto cercando di vedere se c'è una corrispondenza per quella stringa dicendo,
dentro qui un'espressione regolare.
Quindi, l'espressione regolare lo specificherò come barra,
backslash dot e poi,
le opzioni che ho intenzione di specificare sono jpg
o jpeg o
png o gif.
Quindi, è così che specifico l'espressione regolare lì.
Per dire che va bene,
se l'estensione del file contiene jpg o jpeg o png o gif,
allora lo tratterò come un file immagine e sarò disposto ad accettare quei file.
Quindi, questo è ciò che stiamo testando qui.
Se questo è il caso,
cioè se l'estensione del file non corrisponde a nessuna di queste cose, quindi,
è per questo che stiamo vedendo non allora diremo, ritorno cb.
Quindi, si noti che, il cb il primo parametro sarebbe un errore.
Quindi, restituirò un nuovo errore
che dice che puoi caricare solo file di immagine.
Quindi, stiamo insistendo sul fatto che gli unici file che
accetteranno sono i file di immagine e il secondo parametro sarebbe falso.
Poiché stiamo fornendo l'errore come primo parametro,
il secondo parametro è impostato su false.
Il contrario sta dicendo cb null true.
Quindi, il che significa che il file che sta cercando di essere
caricato corrisponde al modello e quindi è un file immagine,
e quindi siamo disposti a lasciarlo caricare.
Due configurazioni che stiamo per fornire a quel modulo multer.
Come configuriamo il modulo multer per l'utilizzo all'interno della nostra applicazione?
Questo è dove dichiarerò il caricamento const
come multer e quindi specificherò tra parentesi che le opzioni qui.
Posso specificare lo storage come funzione di archiviazione che ho appena definito qui.
Questa funzione di archiviazione come primo parametro
e il secondo parametro è un filtro file.
Un filtro file è un metodo che mi consente di specificare
quale tipo di file sono disposto ad accettare e quindi dirò, filtro file immagine.
Basta attivare la parola a capo,
in modo da poter vedere l'intera riga qui.
Quindi, dice che puoi caricare solo file di immagine e poi per il multer,
sto configurando il filtro immagine, il gioco è fatto.
Il mio modulo multer è ora configurato per consentirmi di caricare qui i file immagine.
Quindi andiamo avanti e configurare il router di caricamento.
Per il router di caricamento,
consentirò solo il metodo post qui.
Quindi i
metodi get, put ed delete non saranno consentiti sull'endpoint del router di caricamento.
Per aiutarmi a farlo,
andrò al router piatto e poi ricorderò che avevamo già configurato il put qui.
Ho intenzione di copiarlo e poi venire
al router di caricamento e poi incollerò quelle informazioni qui.
Diremo, se si tratta di un'operazione get, non ho intenzione di
supportare che sull'endpoint sarebbe ImageUpload.
Il get non sarà consentito,
e allo stesso modo il put non sarà consentito,
e anche l'eliminazione non sarà consentita.
Non ho intenzione di supportare nessuna di queste operazioni, quindi metti, cancella.
Questi tre non saranno ammessi.
L' unico metodo che ho intenzione di supportare è il metodo post.
Per il metodo post,
faremo questa autenticazione fino a quel punto.
Ho solo intenzione di copiare quello lì dentro,
chiudere quell'endpoint e per il post.
Quando viene pubblicato un file,
come gestiamo questo post?
Per gestire il post qui,
non ho bisogno del prossimo per questo.
Ora, oltre all'autenticazione VerifyUser e autenticare VerifyAdmin,
sulla stessa riga configurerò il caricamento.
Quindi, ricorda che avevo configurato il caricamento usando multer qui.
Quindi, ho intenzione di fare uso del caricamento che
supporta una funzione chiamata come upload.single.
Questa singola funzione prende come parametro.
Il nome del campo modulo che specifica quel file,
si vedrà che in breve tempo.
Questo campo modulo lo chiamerò come ImageFile qui.
Carica singolo significa che mi permetterà di caricare solo un singolo file qui.
Quel singolo file verrà specificato nel modulo di caricamento dal lato client
nel caricamento del modulo multi-parte utilizzando tale nome lì.
Quando il file viene ottenuto nel codice,
se vengo fino a questo punto,
questo caricamento si occuperà di gestire gli errori se ce ne sono,
se il file non è caricato correttamente e così via.
Quando si arriva a questo punto,
il file sarebbe stato caricato correttamente e
quindi è necessario gestire il file caricato.
A questo punto, diremo res.statusCode è
200 e quindi res.setHeader Content-Type,
'application/json'. Quello che ho intenzione di fare qui è che,
passeremo indietro questo oggetto req.file dal server al client.
Questo oggetto req.file conterrà anche il percorso del file in
esso e tale percorso può essere utilizzato dal client per configurare qualsiasi luogo in cui deve conoscere la posizione di questo file immagine.
Ad esempio, se stai cercando di caricare un piatto
sul lato server e i dettagli del piatto sul lato server,
potresti caricare l'immagine sul server e quindi
recuperare l'URL di quell'immagine e quindi potresti
includere l'URL di quell'immagine nell'oggetto json che descrive il piatto.
Quindi carica il documento json dish sul lato server.
Quindi il req.file viene passato al client,
il req.file come vedrete quando eseguiamo questo server,
il req.file contiene molte informazioni
sul file che è stato appena caricato e quindi lo
esaminerò per ottenere informazioni sul file che ho appena caricato.
Questo è il modo in cui stiamo andando a configurare il metodo post lì, che è tutto.
Il mio router di caricamento è pronto per accettare i caricamenti dei file.
Ora, tutto quello che devo fare è andare su app.js e quindi configurare il router di caricamento.
Quindi, andando a app.js
Abbiamo già tutti questi router.
Quindi, lasciami copiare il loro LeaderRouter e quindi
configurarlo come UploadRouter.
Quindi, questo è nel file UploadRouter qui.
Quindi, configureremo il UploadRouter e poi scendendo qui sotto,
ora configureremo l'endpoint ImageUpload.
Quindi, l'endpoint ImageUpload mi consente di caricare il file.
Quindi, questo sarebbe UploadRouter. Questo è tutto.
La mia applicazione è ora configurata per accettare i caricamenti di file.
Quindi, salviamo le modifiche e poi andiamo a dare un'occhiata a come funziona la nostra applicazione.
Tornando al Terminale,
ora assicurati di avere il tuo server MongoDB installato e funzionante in
una delle schede Terminal o in uno dei comandi Windows.
Nell' altra finestra,
iniziamo il server.
Una volta che il nostro server è attivo e funzionante,
andremo a Postman e poi invieremo o meglio caricare un file da Postman.
Quindi, come ho detto,
per caricare un file,
userai il multipart/form-data.
Quindi, prima, fammi accedere.
Quindi, farò un post sul login degli utenti locali
e mi collegherò come amministratore perché
solo l'amministratore può caricare i loro file lì.
Ricorda che il tuo server è ora in esecuzione sulla porta protetta.
Quindi, diremo https://localhost:3443,
e non c'è autorizzazione qui.
Quindi, lasciami disattivare l'autorizzazione qui e poi inviare la richiesta al server.
Quindi, in Postman, se questo sta accadendo,
che dice che non poteva ottenere alcuna risposta,
questo è perché ora stai eseguendo il server sicuro.
Quindi, in questo caso,
Postman non accetterà il certificato autofirmato che sta arrivando.
Quindi, in tal caso, apri le impostazioni qui e nelle impostazioni,
sotto il campo delle impostazioni generali,
vedrai questa verifica del certificato SSL.
Disattivalo in modo che il tuo Postman sia disposto ad accettare
il certificato autofirmato che abbiamo installato sul lato server.
Quindi, questo è il modo in cui sarai in grado di contattare il tuo server
all'endpoint di accesso utente https://localhost:3443.
Quindi, quando proviamo ad accedere ora,
vedrai che la tua richiesta di post è stata
accettata con successo dal server
e quindi il server risponde con le informazioni sul token.
Quindi, ancora una volta, per assicurarti che Postman ti permetta di contattare il server sicuro,
fai clic su Impostazioni e in Generale,
disattiva la convalida del certificato SSL.
Quindi, una volta effettuato il login,
copiamo il token qui.
Quindi, ho intenzione di copiare il token qui.
Ora, proviamo a caricare il file.
Per caricare il file, come hai notato,
abbiamo bisogno di caricare questo file in localhost: 3443,
e l'endpoint è imageUpload.
Per fare ImageUpload qui,
nell'intestazione, abbiamo bisogno di configurare l'autorizzazione.
Quindi, configureremo l'autorizzazione,
e poi direte,
«Portatore», e forniremo il token che abbiamo ottenuto.
Quindi, tieni una copia del token da qualche parte e copia il token nell'intestazione.
Nel corpo, per caricare un file,
useremo questo forma-dati.
Quindi, questo è ciò che ti permette di fare i dati multipart/form qui.
Quindi, quando fai clic sui dati del modulo,
qui puoi fornire quel file qui che volevi caricare.
Quindi, quando si fa clic su una nuova chiave qui,
utilizzare questa chiave come ImageFile.
Ricordiamo che quando abbiamo configurato il metodo post sul sito UploadRouter,
abbiamo specificato dicendo caricare singolo un ImageFile.
Quindi, questa è la stessa chiave che userai qui.
Quindi, quando fornisci la chiave,
quindi la seconda parte,
lo imposterai da Testo a File qui.
Quindi, questo è ciò che ti permette di specificare il file come valore per questa particolare chiave.
Quindi, vedrai questo pulsante in arrivo che dice: «Scegli file».
Quindi, è possibile aprirlo e quindi selezionare un file che si desidera caricare.
Quindi, qui, vado al mio,
ho un file in una delle mie cartelle qui.
Quindi, ho intenzione di andare in immagini di risorse,
e poi ci limiteremo a caricare un file PNG da qui.
Quindi, puoi dire,
«Carica il file specifico».
Quindi, come ricorderete,
abbiamo configurato il nostro server per accettare solo ImageFile.
Quindi diremo: «Carica quel particolare file».
Quindi, quando fai clic sul pulsante Invia,
quindi noti che nel corpo,
devi configurarlo con i dati del modulo.
Quindi, la multipart/form-data, e quindi la chiave è ImageFile,
e il valore è il file che hai appena selezionato,
quindi fai clic sul pulsante Invia.
Quindi, quando si fa clic sul pulsante Invia,
il file verrà caricato sul lato server e
quindi il server risponderà con questo oggetto.
Quindi, questo è ciò che è contenuto nell'
oggetto req.file che è lì sull'oggetto richiesta qui.
Quindi, questo req.file, come vedi, contiene un nomecampo.
Nome campo è ImageFile.
Quindi, nota che questo è esattamente lo stesso di questo qui.
Il nome originalname, quindi si noti che l'espressione originalname contiene alberto.png,
che è il file che ho caricato.
Ora puoi vedere perché quando ho configurato
la memoria e il nome del file, ho impostato file.originalname.
Quindi, questo è ciò che verrà usato lì.
Potete vedere il tipo di codifica,
il tipo mimetype, e la destinazione,
la cartella in cui è stato inserito il file,
e il percorso effettivo del file qui,
il percorso relativo dalla radice della cartella server qui.
Quindi, questo percorso indica dove il file è accessibile sul lato server.
Quindi, se si stanno configurando i dettagli di un piatto o di una guida, ad esempio,
è sufficiente utilizzare la proprietà image del leader in images/alberto.png.
Public non dovrebbe essere usato comunque perché la cartella pubblica è
quella che funge da cartella principale per il nostro server.
Quindi, hai solo bisogno di fornire queste immagini.alberto.
Quindi, da questo percorso che si ottiene,
una volta che il file è stato caricato correttamente,
estrarre questa parte e quindi utilizzarla per l'immagine nel
documento JSON che descrive il leader specifico.
Quindi, questo è il modo in cui cariciamo un file.
Ora, per convincervi che la multa è stata caricata,
andiamo al nostro progetto.
Andando al nostro progetto,
nella cartella pubblica,
ora puoi vedere che c'è una sottocartella di immagini lì.
Nella sottocartella delle immagini,
puoi vedere il file alberta.png caricato lì.
Ora, possiamo caricare più ImageFiles nel nostro lato server.
Ora, se si tenta di caricare un non-ImageFile,
si vedrebbe che il server non accetterà
un non-ImageFile e poi risponderà indietro dicendo,
«Impossibile accettare il non-ImageFile».
Quindi, questo è il modo in cui configureremo il nostro server espresso
per accettare caricamenti di ImageFiles dal nostro lato client.
Con questo, completiamo questo esercizio.
In questo esercizio, abbiamo visto come usiamo
il meta modulo per configurare il nostro server express per
accettare i caricamenti di file su un endpoint API /imageUpload Rest.
Quando pubblichiamo l'endpoint,
il file viene caricato in una cartella specificata sul sito server.
Con questo, completiamo questo esercizio.
Questo è un buon momento per fare un commit git con il messaggio 'file upload'.