‫Jonas: In questa seconda parte del caricamento delle immagini
‫del tour, le elaboreremo tutte.
‫Ma prima di
‫iniziare a farlo, c'è qualcosa
‫che devo sistemare nel controller utente.
‫E quindi in realtà in questo resizeUserPhoto,
‫e cioè che dobbiamo
‫davvero aspettare l'intera operazione qui, va bene?
‫Quindi tutto questo qui in realtà restituirà una promessa, e
‫questo ha senso, giusto,
‫perché tutte queste operazioni qui richiedono del tempo,
‫e quindi ovviamente accadono in background.
‫Quindi sono codice asincrono e
‫quindi ovviamente non dovrebbero bloccare il ciclo degli eventi.
‫Ora il problema qui è
‫che in questo momento stiamo chiamando questa
‫prossima funzione qui, quindi il prossimo middleware, senza
‫effettivamente aspettare che queste operazioni qui finiscano.
‫E questa non è una buona idea.
‫E quindi usiamo semplicemente
‫wait qui, e poi ovviamente asincrono, e tutta quella roba.
‫Quindi catchAsync qui.
‫Va bene, salvalo ed è molto meglio.
‫E così ora faremo qualcosa
‫di molto simile con le immagini del nostro tour.
‫E quindi lasciami andare avanti e copiare questo.
‫Va bene, e anche
‫se non sarà esattamente lo stesso, è bello averlo già qui.
‫Quindi anche questa sarà una funzione asincrona.
‫Bene, ora come prima, nel caso in cui
‫non ci siano immagini caricate,
‫allora vogliamo passare direttamente al prossimo middleware.
‫Quindi se non ci sono richieste. file, e in realtà farò
‫un ulteriore passo avanti, richiedendo che
‫ci siano sia la copertina dell'immagine che
‫anche le immagini.
‫E quindi fondamentalmente vogliamo passare al prossimo middleware nel caso non
‫ci siano richieste. File. imageCover,
‫o nessuna richiesta. File. immagini.
‫Quindi in tal caso, il prossimo.
‫Ok, e ora iniziamo elaborando l'immagine di
‫copertina e poi tutte le altre immagini in un ciclo,
‫in pratica.
‫Quindi altre immagini.
‫Ora, dove otteniamo effettivamente l'immagine di copertina?
‫Ricordo bene come ho detto che è su richiesta. File?
‫Non più file, e poi . coverImage, o
‫in realtà imageCover.
‫E poi ricordi come fosse un array?
‫Quindi diamo un'occhiata a questo ancora una volta.
‫Giusto, quindi tutto questo è richiesta. file, e
‫poi da lì prendiamo imageCover, e questo
‫è un array di un elemento.
‫E quindi ora vogliamo l'elemento numero zero, e
‫poi . respingente.
‫Quindi questa cosa dall'aspetto strano qui.
‫Quindi vogliamo ridimensionarlo a un rapporto di
‫2/3, e la larghezza sarà
‫di 2.000 pixel e l'altezza di 1.333, va bene?
‫E così di nuovo, questo è un buon rapporto 3/2,
‫che è molto comune nelle immagini.
‫Successivamente, vogliamo anche formattarlo come JPEG con una qualità del 90%,
‫quindi salvarlo come file.
‫Ma questa volta si tratta di
‫image/tours, e qui definiamo il nostro nome file separatamente.
‫D'accordo, perché ne avremo davvero bisogno di nuovo.
‫Quindi imageCoverFilename, e quindi
‫ancora una volta dobbiamo creare un nome file univoco.
‫Quindi ora è tour, quindi mettiamo di nuovo
‫l'ID del tour qui, dove prima era l'ID dell'utente.
‫E quindi è su richiesta. params, quindi ricorda che
‫questo percorso conterrà sempre
‫l'ID del tour, quindi è
‫su richiesta. parametri. ID.
‫Poi di nuovo il timestamp, Data. ora, e poi diciamo
‫che questa è l'immagine di copertina, ok?
‫E gli altri riceveranno dei numeri.
‫E poi ovviamente. jpeg, quindi usiamolo qui.
‫Quindi imageCoverFilename.
‫Ok, e ora come ultimo passaggio, dobbiamo effettivamente
‫rendere possibile che
‫il nostro gestore del tour
‫di aggiornamento raccolga questo nome file di copertina dell'immagine per
‫aggiornarlo nel documento del tour corrente, ok?
‫Quindi diamo rapidamente
‫un'occhiata a come viene effettivamente aggiornato il documento.
‫E quindi stiamo semplicemente
‫usando questa funzione di fabbrica updateOne.
‫E quello in realtà aggiornerà semplicemente tutti i dati
‫che sono nel corpo sul nuovo documento.
‫Quindi, solo per dimostrartelo proprio qui.
‫Quindi updateOne, prende l'intera richiesta. corpo, ok?
‫E quindi ora il segreto è mettere effettivamente questo nome
‫file di copertina dell'immagine su richiesta. corpo, va bene?
‫Quindi richiesta. corpo. immagine di copertina.
‫Oh e ancora, si chiama imageCover
‫invece, dovrebbe essere uguale a imageCoverFilename, ok, ha senso?
‫E ovviamente si chiama imageCover
‫perché questo è il nome che abbiamo nella definizione dello schema.
‫Quindi, quando esegue l'aggiornamento,
‫abbinerà questo campo nel corpo con
‫il campo nel nostro database.
‫E in realtà possiamo rifattorizzare un po'
‫questo perché non abbiamo affatto bisogno di questo nome di variabile qui.
‫Quindi potremmo semplicemente mettere questo nome di file qui proprio sul corpo.
‫Quindi mettilo qui e poi usalo qui subito.
‫Quindi non abbiamo affatto bisogno di questa riga di codice.
‫Ottimo, e ora prima di passare alle altre immagini, proviamolo effettivamente
‫con quello che abbiamo già a
‫questo punto.
‫Quindi sbarazziamoci di questa console. log, quindi
‫quando facciamo la richiesta, la
‫nostra immagine di copertina dovrebbe essere
‫già caricata e inserita nel documento del tour, ok?
‫Quindi queste altre tre immagini qui ovviamente no, ma
‫almeno la copertina
‫dell'immagine dovrebbe funzionare a questo punto,
‫almeno se abbiamo fatto tutto correttamente.
‫Quindi vediamo se è da qualche parte qui
‫e le immagini sono ancora vuote ovviamente.
‫Ma ora sto cercando l'immagine di copertina, quindi dov'è?
‫Ed eccolo qui, quindi imageCover, e quindi
‫assomiglia molto al nome del file
‫che abbiamo appena specificato.
‫E in realtà proviamo a ricaricare la nostra pagina di tutti i tour qui, e forse
‫il nostro nuovo tour è già qui.
‫Ah, ci siamo, quindi questo è il nuovo tour in mountain bike.
‫E questa è davvero l'immagine che abbiamo appena caricato.
‫Così bello.
‫Ora, se proviamo ad
‫aprire questa pagina, le altre immagini non sono qui, ok?
‫Quindi non si trovano da
‫nessuna parte, e ovviamente è quello che faremo dopo.
‫Va bene.
‫Quindi ricorda che le nostre
‫immagini qui sono anche un array,
‫che quindi contiene tutti questi nuovi caricamenti di file.
‫E quindi ora usiamo effettivamente un
‫ciclo per elaborare ciascuno di essi in un'iterazione.
‫Quindi richiesta. File. immagini. per ciascuno.
‫E poi la nostra
‫funzione di callback in cui otteniamo l'accesso al file corrente.
‫Bene, ora qui abbiamo effettivamente bisogno di
‫creare il nome del file corrente e vedrai
‫perché in un secondo.
‫Quindi il nome del file è uguale e quindi qualcosa di molto simile a questo.
‫Con la differenza che adesso non si tratta
‫di cover, ma invece le vogliamo chiamare uno, due e tre.
‫E quindi nella
‫nostra funzione di callback otteniamo anche l'accesso all'indice corrente, ok?
‫Quindi abbiamo bisogno di file e io di index.
‫E quindi qui non è copertina, ma indice più uno.
‫Quindi più uno, ed è solo
‫perché questo indice è in base zero, ok?
‫Successivamente viene la fase di elaborazione stessa, che
‫è di nuovo molto simile a questa.
‫E ora ovviamente dobbiamo contrassegnare anche questo come asincrono.
‫Va bene, e qui sotto ora c'è il nome del file.
‫Ok, ora perché abbiamo davvero bisogno di questo nome file?
‫Bene, ne abbiamo bisogno perché ora dobbiamo inserire questo
‫nome file in request. corpo. immagini, e quindi questa è esattamente la stessa logica
‫che avevamo qui prima su richiesta. corpo. immagineCopertina.
‫Quindi ricorda che nella nostra
‫collezione, richiesta. corpo. immagini è in realtà un array.
‫E quindi ora dobbiamo creare quell'array e avviarlo
‫come un array vuoto.
‫Quindi richiesta. corpo. images
‫come un array vuoto, quindi in ogni iterazione
‫inseriremo il nome del file corrente
‫in questo array di immagini.
‫Quindi richiesta. corpo. immagini. push,
‫il nome del file, va bene?
‫E con questo abbiamo quasi finito.
‫C'è solo un piccolo problema, che
‫è il fatto che
‫in questo caso non stiamo usando async attendere correttamente, quindi
‫in questo ciclo.
‫E questo perché questa attesa asincrona
‫qui è solo all'interno di questa funzione di
‫callback del ciclo foreach.
‫E quindi questo in realtà
‫non impedirà al codice di spostarsi proprio accanto a
‫questa riga dove chiameremo il prossimo middleware, ok?
‫Quindi di nuovo, in questo momento in realtà non stiamo
‫aspettando nulla di tutto questo qui, di nuovo, perché questa attesa asincrona
‫si verifica all'interno della funzione di
‫callback di uno di questi metodi di ciclo.
‫E ci imbattiamo in questo tipo di problema
‫in realtà prima, ma fortunatamente c'è una soluzione
‫per questo, perché poiché questa è una funzione
‫asincrona qui, restituirà una nuova promessa.
‫Quindi, se facciamo una mappa,
‫possiamo effettivamente salvare una serie di tutte queste promesse.
‫E poi se abbiamo un array
‫possiamo usare la promessa. tutti in attesa di tutti loro.
‫E così con ciò aspetteremo effettivamente fino
‫a quando tutto questo codice, e in questo
‫caso, fino a quando tutta questa elaborazione
‫dell'immagine non sarà terminata, e solo allora passeremo alla
‫riga successiva, che sta chiamando il
‫prossimo middleware per aggiornare davvero i documenti del tour.
‫E se non lo
‫facessimo in questo caso, non
‫funzionerebbe affatto, perché senza questa spinta qui,
‫la richiesta. corpo. le immagini sarebbero ancora vuote
‫quando chiamiamo next.
‫E quindi, nessuno di questi
‫nomi di immagine sarebbe stato mantenuto nel documento, ok?
‫Quindi ora usiamo la promessa. tutto, e
‫in realtà non sto nemmeno salvando questo array qui su nessuna
‫variabile, invece userò promise. tutto subito su
‫questo.
‫Quindi aspetta Promessa. tutto sull'array di
‫ritorno da questo, ok?
‫Quindi spero che abbia avuto senso.
‫Quindi ora registriamo il corpo qui sulla console.
‫Va bene, quindi con questo dovremmo essere pronti
‫per caricare tutte le nostre immagini, ok?
‫Scendiamo qui e riproviamo.
‫Va bene, allora dov'è il nostro array di immagini?
‫Beh, forse era da qualche parte quassù, ah, eccolo qui.
‫Quindi in qualche modo me lo sono perso.
‫E questo sembra molto promettente, giusto?
‫Quindi tre belle immagini,
‫ora diamo un'occhiata qui alla nostra pagina.
‫Ah, ci sono, ma non del tutto corretti, giusto?
‫Quindi sembra che abbiamo semplicemente caricato
‫l'immagine di copertina tre volte.
‫Quindi diamo un'occhiata a Postman, ma i
‫nomi delle immagini sono effettivamente
‫corretti, quindi c'è qualcosa di sbagliato nella nostra elaborazione.
‫Diamo un'occhiata anche alle richieste. corpo, oh, e ho dimenticato
‫di metterlo qui.
‫Ok, ma penso che non sia nemmeno necessario perché
‫abbiamo appena visto in Postman
‫che i nomi dei file sono effettivamente corretti.
‫Quindi non abbiamo più bisogno di questo.
‫Ora diamo solo un'occhiata ai nomi dei
‫file che abbiamo appena caricato, in modo che siano in pubblico e in tour.
‫E quindi eccoli qui.
‫Quindi questo è stato probabilmente il primo dell'ultimo test.
‫E quindi, come vedi, sono tutti, in
‫effetti, la stessa identica immagine.
‫Quindi copertina, uno, due e tre sono le stesse immagini,
‫e quindi non è corretto.
‫E posso vedere in realtà subito qual è il problema.
‫Quindi vedi che stiamo effettivamente leggendo, ancora,
‫richiesta. File. imageCover e
‫non il file dell'iterazione corrente di questo ciclo.
‫Ok, quindi dovrebbe essere file. respingente.
‫Va bene, quindi andiamo avanti
‫ed eliminiamo tutti questi.
‫Va bene, e riprova ora.
‫Quindi mandiamolo.
‫I nomi sembrano ancora
‫corretti, ma ora quando ricarichiamo questo, vediamo.
‫Ah, sembra corretto.
‫Bello bello.
‫Vedete, le immagini sono tutte ben formattate,
‫anche questa che era, ricordate, in
‫verticale e nemmeno in orizzontale,
‫ma in pratica l'abbiamo ritagliata e sembra ancora bella.
‫Ok, ora possiamo confermarlo, in modo
‫che sia effettivamente tra 2.000 per 1.333 pixel.
‫Va bene, è ancora un po' troppo grande qui, quindi
‫forse potremmo ridurre un po' di più la qualità, ma
‫non è molto importante.
‫Ciò che conta davvero qui
‫è che la logica che abbiamo appena applicato qui funziona davvero.
‫Quindi, solo per ricapitolare rapidamente ciò che abbiamo fatto in queste due lezioni.
‫Quindi abbiamo creato un caricamento multiplo utilizzando la memoria di archiviazione e
‫questo filtro solo per le immagini.
‫Quindi abbiamo creato il middleware dell'immagine del tour
‫di caricamento utilizzando upload. field, che prende una
‫copertina e tre immagini, e poi su
‫richiesta metterà le proprietà dei file in questo modo, va bene?
‫Quindi nel nostro prossimo middleware ridimensioniamo queste immagini, e
‫prima l'immagine di
‫copertina e poi le restanti tre immagini.
‫E ciò che è veramente importante notare qui
‫è come mettiamo i nomi dei file di immagine su richiesta. corpo.
‫E lo facciamo in modo che
‫nel prossimo middleware, che è
‫il vero gestore del percorso, inserirà quei dati
‫nel nuovo documento quando lo aggiornerà, ok?
‫Quindi lo facciamo con la copertina dell'immagine
‫e lo facciamo anche con le immagini
‫rimanenti spingendola nel corpo. images, che come
‫sappiamo dal nostro schema di
‫tour, prevede un array di stringhe.
‫E quindi, in questo caso, i nomi dei file.
‫Quindi su queste altre immagini, le
‫abbiamo avute su richiesta. File. images, quindi è un
‫array e quindi ovviamente lo eseguiamo in loop usando map.
‫E usiamo map in modo da poter sostanzialmente
‫salvare le tre promesse che sono
‫il risultato di queste tre funzioni asincrone qui,
‫quindi possiamo quindi aspettarle tutte
‫qui usando Promise. tutto ok?
‫E solo dopo si passa
‫all'effettivo gestore degli aggiornamenti del tour, ok?
‫E questa parte è
‫davvero importante, quindi è importante passare
‫al middleware successivo non appena questa parte qui
‫è davvero completata.
‫Perché altrimenti, chiedi. corpo. le immagini saranno
‫vuote e ovviamente i nostri nomi di file non verranno
‫salvati nel documento del tour corrente, va bene?
‫E questo in realtà conclude
‫la parte di caricamento dell'immagine o del file di questa sezione.
‫Quindi spero che sia stato
‫divertente, so che per me è stato davvero bello.
‫Quindi mi piacciono molto questo
‫genere di cose, che fanno sembrare le mie applicazioni un mondo reale.
‫Comunque, spero che ti sia piaciuto,
‫e ci vediamo al prossimo.