‫Narratore: Quindi, ora che la funzione
‫di caricamento delle foto dell'utente è completata, impariamo come
‫caricare più file contemporaneamente
‫e anche come elaborare più immagini contemporaneamente.
‫E così in questa conferenza e
‫nella prossima, caricheremo ed elaboreremo le immagini del tour.
‫E per iniziare ricordiamoci che tipo di immagini
‫vogliamo per i nostri tour e anche quante, quindi dovremmo dare
‫un'occhiata al nostro modello di tour qui.
‫E così qui abbiamo la copertina dell'immagine che in realtà è
‫solo un'immagine e
‫poi abbiamo anche il campo
‫dell'immagine che sarà una serie di immagini.
‫E in genere queste dovrebbero essere almeno tre immagini perché
‫questa è la quantità di immagini che abbiamo nella
‫pagina dei dettagli del tour.
‫Destra?
‫Quindi, di nuovo, avremo la copertina
‫dell'immagine e le immagini come un array.
‫Va bene.
‫Ora il modo
‫in cui caricheremo ed elaboreremo queste immagini
‫sarà molto simile a quello
‫che abbiamo fatto con gli utenti, quindi andiamo
‫avanti nel controller utente e copiamo qui almeno questa
‫parte iniziale della configurazione multer.
‫Va bene, quindi prendi quello e
‫poi nel controller del tour, proprio qui in
‫alto, mettilo qui e lascia
‫anche ottenere il multer e il requisito tagliente.
‫Va bene, fantastico.
‫E così, proprio come prima,
‫memorizzeremo le immagini in memoria, va bene,
‫e inoltre consentiamo solo alle immagini di passare il nostro filtro.
‫Quindi, in altre parole, vogliamo solo essere in grado di caricare immagini.
‫Va bene.
‫Quindi qui creiamo o
‫carichiamo esattamente nello stesso modo di
‫prima, quindi
‫ora creiamo effettivamente il middleware da questo caricamento.
‫Va bene.
‫Quindi esporta il punto carica il tour, le immagini, quindi carica.
‫E ora arriva la
‫parte diversa, quindi qualcosa che
‫sarà diverso da quello che abbiamo
‫fatto qui nel controller degli utenti perché avevamo upload dot single.
‫Va bene.
‫E questo perché avevamo un solo campo con
‫un file che volevamo caricare
‫e quindi ecco il nome di quel campo.
‫Destra?
‫Ma ora in realtà abbiamo più file
‫e in uno di essi
‫abbiamo un'immagine e nell'altro abbiamo tre immagini.
‫Quindi, come possiamo farlo?
‫Bene, useremo i campi di caricamento dei punti, quindi multer è
‫in realtà perfettamente in grado di
‫gestire questo tipo di situazioni.
‫Quindi qui passiamo un array e
‫ciascuno degli elementi è un oggetto in cui specifichiamo
‫il nome del campo.
‫E quindi il
‫primo, ricorda, è la copertina dell'immagine, e poi diciamo che il conteggio massimo è uno.
‫E quindi questo significa
‫che possiamo avere solo un campo
‫chiamato copertina dell'immagine, che verrà poi elaborato.
‫Va bene, e poi facciamo lo stesso per le nostre immagini,
‫quindi questo è l'altro campo nel nostro
‫database e quindi qui lo chiamiamo
‫anche immagini e qui diciamo che il conteggio massimo è tre.
‫Va bene.
‫E nel caso in cui non avessimo la
‫copertina dell'immagine e se avesse solo un campo che accetta più
‫immagini o più file contemporaneamente, avremmo potuto
‫farlo in questo modo.
‫Quindi useremmo l'array di punti di caricamento, ok?
‫E poi il nome
‫del campo, e quindi in pratica il conteggio massimo qui come un numero come questo.
‫Va bene?
‫Quindi, quando ce n'è uno solo, allora è upload punto singolo, diciamo immagine,
‫quando ce ne sono più con lo stesso nome, allora è
‫upload dot array e quando c'è fondamentalmente un mix
‫di essi, allora è upload dot field.
‫Va bene?
‫Ora forse questo sembra un
‫po' complicato ora, quindi prima di andare avanti
‫replichiamo effettivamente questo tipo di query in Postman, ok?
‫E in realtà prima di farlo,
‫dobbiamo creare un nuovo tour.
‫Va bene, e in realtà
‫lo farò qui in bussola semplicemente duplicando uno dei
‫tour che abbiamo già.
‫Quindi diciamo qui, il Sea Explorer, e
‫ora lo sto duplicando.
‫E quindi qui posso cambiare quello che voglio avere di
‫diverso e questo si chiama The Mountain Biker,
‫diciamo durata di cinque, dimensione massima del gruppo di dieci, e poi ciò
‫che conta davvero è sbarazzarsi della copertina
‫dell'immagine perché è quello che noi desidera aggiornare in seguito e anche
‫l'array di immagini.
‫Creato a può anche andare e, naturalmente, abbiamo
‫bisogno di cambiare la lumaca, quindi il mountain biker.
‫Va bene?
‫E tra l'altro, avevamo bisogno
‫di creare un nuovo tour come questo in modo da avere effettivamente
‫i luoghi, il riepilogo e la descrizione e tutto
‫il resto, in modo che il turista possa visualizzare correttamente il nostro sito web.
‫Va bene, quindi inseriamolo e quindi dovrebbe
‫essere da qualche parte qui proprio alla fine, ok.
‫Quindi prendiamo l'ID qui e ora qui in
‫Postman, quindi aggiorniamo il tour.
‫Quindi lo passiamo qui e ora nel nostro corpo,
‫ricordiamo che abbiamo bisogno di passare dai dati grezzi a quelli del modulo.
‫Va bene?
‫Chiudiamo tutti questi qui e facciamo anche il login qui
‫come amministratore perché altrimenti l'aggiornamento del
‫tour non funzionerà.
‫Quindi admin@nators. io, va bene.
‫E quindi ora ricreiamo solo una richiesta del corpo qui simile
‫a quella che abbiamo appena specificato qui.
‫Quindi sostanzialmente simile a quello che si aspetta il nostro caricamento
‫multer, quindi una copertina e tre immagini.
‫Quindi, copertina dell'immagine, che è un file, quindi selezioniamolo.
‫E quindi qui abbiamo queste nuove foto
‫per i tour e usiamo effettivamente
‫questa prima qui come immagine di copertina e poi
‫immagini, mettiamo anche quella qui per archiviare, e poi
‫qui le altre tre.
‫E ora, come vedete, si chiameranno tutti immagini.
‫Ok, e possiamo avere solo un massimo di tre,
‫almeno solo tre di
‫loro verranno elaborati da multer, ok?
‫E in realtà qui vedi che abbiamo davvero
‫bisogno di ridimensionare questo perché sul nostro sito
‫web appaiono tutti in questo formato orizzontale e
‫non verticale come lo abbiamo qui.
‫Va bene?
‫Ed è per
‫questo che è necessario elaborare anche queste immagini, ok?
‫E ovviamente possiamo anche cambiare altre
‫cose qui, quindi diciamo che vogliamo cambiare il prezzo a 9-9-7, ok?
‫Ora, non invierò ancora questa richiesta perché non abbiamo
‫implementato alcuna logica per gestirla a
‫questo punto, giusto, perché non la
‫stiamo realmente caricando
‫nel file system, ma solo salvandola in memoria .
‫E così, solo per dare
‫un'occhiata veloce, creiamo il nostro prossimo middleware
‫qui, che sarà quello che elaborerà queste immagini.
‫Quindi esporta il punto ridimensiona le immagini del tour, quindi richiesta,
‫risposta e avanti, e ora consente di registrarle sulla console.
‫Va bene, e nel caso in cui abbiamo
‫più file, in realtà sono file dot su richiesta e non solo file.
‫Va bene?
‫Quindi questo qui fondamentalmente produrrà
‫file di punti di richiesta mentre i campi e
‫l'array produrranno entrambi file di punti di richiesta, quindi il plurale.
‫Va bene, allora accedi
‫alla console e poi chiamiamo next qui
‫in modo da
‫poter poi finire il ciclo di richiesta-risposta, ok.
‫Dagli un salvataggio e ora
‫tutto ciò che dobbiamo fare per testare effettivamente la richiesta
‫è aggiungere questi due nuovi middleware al gestore del percorso.
‫Va bene, quindi tour percorsi e proprio come con gli utenti, per semplificare
‫le cose qui, consentiremo solo il caricamento di
‫immagini su un aggiornamento del tour.
‫Quindi quaggiù è dove abbiamo quella richiesta di patch, va bene,
‫e quindi abbiamo già un
‫sacco di middleware, quindi proteggi, limita ad amministratori
‫e guide, e ora aggiungiamo anche il controller del tour, carica
‫le immagini del tour e ridimensiona il tour del controller immagini.
‫Quindi questo è davvero un bel stack di middleware proprio qui, ok?
‫E quindi penso che ora siamo pronti
‫per testare effettivamente la richiesta che abbiamo creato qui.
‫E ancora, ovviamente, non farà davvero nulla, non
‫salverà queste immagini da nessuna parte
‫e non aggiornerà il database,
‫ma per ora vogliamo solo vedere il risultato nella console.
‫Beh, dovrebbe aver effettivamente aggiornato il prezzo,
‫quindi diamo subito un'occhiata a questo.
‫Sì, quindi il prezzo ora è aggiornato,
‫ma di nuovo le immagini ovviamente no, va bene?
‫E ora qui li abbiamo nella console, quindi rendiamolo
‫un po' più grande e quindi qui
‫abbiamo la copertina dell'immagine in cui abbiamo ottenuto il
‫nome del campo, il nome originale e anche
‫il tipo MIME, ok, quindi vedi il buffer qui ,
‫e quindi questa è fondamentalmente una
‫rappresentazione dell'immagine in memoria.
‫Ora è importante notare
‫che in realtà anche la copertina dell'immagine è un array, ok?
‫Quindi, quando
‫recupereremo l'immagine dalla copertina dell'immagine, dovremo
‫utilizzare il primo elemento di questo array.
‫E poi nelle immagini, qui è ovvio che
‫abbiamo un array e qui
‫per ciascuna delle immagini abbiamo un oggetto come questo.
‫Quindi con il nome originale, tour quattro, tre e due, e poi ognuno
‫di loro come buffer.
‫Va bene, quindi tutto è ben collegato e quindi tutto ciò che
‫dobbiamo fare ora è creare fondamentalmente questo ridimensionamento delle immagini del
‫tour, perché è qui che le immagini
‫verranno quindi elaborate e anche
‫salvate su disco.
‫Ok, questo è l'argomento della prossima lezione.