1 00:00:01,140 --> 00:00:03,990 ‫Narratore: Quindi, ora che la funzione 2 00:00:03,990 --> 00:00:08,080 ‫di caricamento delle foto dell'utente è completata, impariamo come 3 00:00:08,080 --> 00:00:10,080 ‫caricare più file contemporaneamente 4 00:00:10,080 --> 00:00:13,170 ‫e anche come elaborare più immagini contemporaneamente. 5 00:00:13,170 --> 00:00:15,430 ‫E così in questa conferenza e 6 00:00:15,430 --> 00:00:18,713 ‫nella prossima, caricheremo ed elaboreremo le immagini del tour. 7 00:00:20,770 --> 00:00:23,750 ‫E per iniziare ricordiamoci che tipo di immagini 8 00:00:23,750 --> 00:00:28,070 ‫vogliamo per i nostri tour e anche quante, quindi dovremmo dare 9 00:00:28,070 --> 00:00:31,033 ‫un'occhiata al nostro modello di tour qui. 10 00:00:32,450 --> 00:00:37,450 ‫E così qui abbiamo la copertina dell'immagine che in realtà è 11 00:00:38,050 --> 00:00:40,170 ‫solo un'immagine e 12 00:00:40,170 --> 00:00:42,400 ‫poi abbiamo anche il campo 13 00:00:42,400 --> 00:00:45,610 ‫dell'immagine che sarà una serie di immagini. 14 00:00:45,610 --> 00:00:48,390 ‫E in genere queste dovrebbero essere almeno tre immagini perché 15 00:00:48,390 --> 00:00:51,000 ‫questa è la quantità di immagini che abbiamo nella 16 00:00:51,000 --> 00:00:52,950 ‫pagina dei dettagli del tour. 17 00:00:52,950 --> 00:00:53,810 ‫Destra? 18 00:00:53,810 --> 00:00:56,010 ‫Quindi, di nuovo, avremo la copertina 19 00:00:56,010 --> 00:00:58,290 ‫dell'immagine e le immagini come un array. 20 00:00:58,290 --> 00:00:59,410 ‫Va bene. 21 00:00:59,410 --> 00:01:01,240 ‫Ora il modo 22 00:01:01,240 --> 00:01:04,080 ‫in cui caricheremo ed elaboreremo queste immagini 23 00:01:04,080 --> 00:01:06,140 ‫sarà molto simile a quello 24 00:01:06,140 --> 00:01:09,620 ‫che abbiamo fatto con gli utenti, quindi andiamo 25 00:01:09,620 --> 00:01:13,444 ‫avanti nel controller utente e copiamo qui almeno questa 26 00:01:13,444 --> 00:01:15,820 ‫parte iniziale della configurazione multer. 27 00:01:15,820 --> 00:01:18,620 ‫Va bene, quindi prendi quello e 28 00:01:18,620 --> 00:01:21,883 ‫poi nel controller del tour, proprio qui in 29 00:01:23,130 --> 00:01:25,774 ‫alto, mettilo qui e lascia 30 00:01:25,774 --> 00:01:29,293 ‫anche ottenere il multer e il requisito tagliente. 31 00:01:33,410 --> 00:01:37,610 ‫Va bene, fantastico. 32 00:01:37,610 --> 00:01:39,850 ‫E così, proprio come prima, 33 00:01:39,850 --> 00:01:42,750 ‫memorizzeremo le immagini in memoria, va bene, 34 00:01:42,750 --> 00:01:46,900 ‫e inoltre consentiamo solo alle immagini di passare il nostro filtro. 35 00:01:46,900 --> 00:01:51,720 ‫Quindi, in altre parole, vogliamo solo essere in grado di caricare immagini. 36 00:01:51,720 --> 00:01:52,553 ‫Va bene. 37 00:01:52,553 --> 00:01:54,670 ‫Quindi qui creiamo o 38 00:01:54,670 --> 00:01:57,060 ‫carichiamo esattamente nello stesso modo di 39 00:01:57,060 --> 00:01:58,180 ‫prima, quindi 40 00:01:58,180 --> 00:02:01,420 ‫ora creiamo effettivamente il middleware da questo caricamento. 41 00:02:01,420 --> 00:02:02,780 ‫Va bene. 42 00:02:02,780 --> 00:02:07,780 ‫Quindi esporta il punto carica il tour, le immagini, quindi carica. 43 00:02:12,540 --> 00:02:14,536 ‫E ora arriva la 44 00:02:14,536 --> 00:02:17,020 ‫parte diversa, quindi qualcosa che 45 00:02:17,020 --> 00:02:19,650 ‫sarà diverso da quello che abbiamo 46 00:02:19,650 --> 00:02:24,380 ‫fatto qui nel controller degli utenti perché avevamo upload dot single. 47 00:02:24,380 --> 00:02:25,213 ‫Va bene. 48 00:02:25,213 --> 00:02:28,110 ‫E questo perché avevamo un solo campo con 49 00:02:28,110 --> 00:02:30,000 ‫un file che volevamo caricare 50 00:02:30,000 --> 00:02:32,930 ‫e quindi ecco il nome di quel campo. 51 00:02:32,930 --> 00:02:33,763 ‫Destra? 52 00:02:33,763 --> 00:02:36,150 ‫Ma ora in realtà abbiamo più file 53 00:02:36,150 --> 00:02:38,490 ‫e in uno di essi 54 00:02:38,490 --> 00:02:40,920 ‫abbiamo un'immagine e nell'altro abbiamo tre immagini. 55 00:02:40,920 --> 00:02:42,537 ‫Quindi, come possiamo farlo? 56 00:02:42,537 --> 00:02:47,010 ‫Bene, useremo i campi di caricamento dei punti, quindi multer è 57 00:02:47,010 --> 00:02:49,850 ‫in realtà perfettamente in grado di 58 00:02:49,850 --> 00:02:52,280 ‫gestire questo tipo di situazioni. 59 00:02:52,280 --> 00:02:54,570 ‫Quindi qui passiamo un array e 60 00:02:54,570 --> 00:02:57,520 ‫ciascuno degli elementi è un oggetto in cui specifichiamo 61 00:02:57,520 --> 00:02:59,283 ‫il nome del campo. 62 00:03:01,020 --> 00:03:02,420 ‫E quindi il 63 00:03:02,420 --> 00:03:07,420 ‫primo, ricorda, è la copertina dell'immagine, e poi diciamo che il conteggio massimo è uno. 64 00:03:09,920 --> 00:03:11,820 ‫E quindi questo significa 65 00:03:11,820 --> 00:03:14,220 ‫che possiamo avere solo un campo 66 00:03:14,220 --> 00:03:16,730 ‫chiamato copertina dell'immagine, che verrà poi elaborato. 67 00:03:16,730 --> 00:03:20,163 ‫Va bene, e poi facciamo lo stesso per le nostre immagini, 68 00:03:21,910 --> 00:03:24,210 ‫quindi questo è l'altro campo nel nostro 69 00:03:24,210 --> 00:03:26,300 ‫database e quindi qui lo chiamiamo 70 00:03:27,400 --> 00:03:30,683 ‫anche immagini e qui diciamo che il conteggio massimo è tre. 71 00:03:31,950 --> 00:03:32,783 ‫Va bene. 72 00:03:34,440 --> 00:03:37,350 ‫E nel caso in cui non avessimo la 73 00:03:37,350 --> 00:03:41,340 ‫copertina dell'immagine e se avesse solo un campo che accetta più 74 00:03:41,340 --> 00:03:43,870 ‫immagini o più file contemporaneamente, avremmo potuto 75 00:03:43,870 --> 00:03:45,483 ‫farlo in questo modo. 76 00:03:46,990 --> 00:03:51,910 ‫Quindi useremmo l'array di punti di caricamento, ok? 77 00:03:51,910 --> 00:03:53,460 ‫E poi il nome 78 00:03:55,920 --> 00:04:00,730 ‫del campo, e quindi in pratica il conteggio massimo qui come un numero come questo. 79 00:04:00,730 --> 00:04:01,640 ‫Va bene? 80 00:04:01,640 --> 00:04:06,120 ‫Quindi, quando ce n'è uno solo, allora è upload punto singolo, diciamo immagine, 81 00:04:09,520 --> 00:04:13,240 ‫quando ce ne sono più con lo stesso nome, allora è 82 00:04:13,240 --> 00:04:16,330 ‫upload dot array e quando c'è fondamentalmente un mix 83 00:04:16,330 --> 00:04:19,303 ‫di essi, allora è upload dot field. 84 00:04:21,330 --> 00:04:22,750 ‫Va bene? 85 00:04:22,750 --> 00:04:25,300 ‫Ora forse questo sembra un 86 00:04:25,300 --> 00:04:28,320 ‫po' complicato ora, quindi prima di andare avanti 87 00:04:28,320 --> 00:04:31,630 ‫replichiamo effettivamente questo tipo di query in Postman, ok? 88 00:04:31,630 --> 00:04:33,750 ‫E in realtà prima di farlo, 89 00:04:33,750 --> 00:04:35,523 ‫dobbiamo creare un nuovo tour. 90 00:04:37,190 --> 00:04:39,280 ‫Va bene, e in realtà 91 00:04:39,280 --> 00:04:42,490 ‫lo farò qui in bussola semplicemente duplicando uno dei 92 00:04:42,490 --> 00:04:44,330 ‫tour che abbiamo già. 93 00:04:44,330 --> 00:04:46,623 ‫Quindi diciamo qui, il Sea Explorer, e 94 00:04:47,920 --> 00:04:49,680 ‫ora lo sto duplicando. 95 00:04:49,680 --> 00:04:53,780 ‫E quindi qui posso cambiare quello che voglio avere di 96 00:04:53,780 --> 00:04:56,743 ‫diverso e questo si chiama The Mountain Biker, 97 00:04:59,270 --> 00:05:04,263 ‫diciamo durata di cinque, dimensione massima del gruppo di dieci, e poi ciò 98 00:05:05,190 --> 00:05:08,120 ‫che conta davvero è sbarazzarsi della copertina 99 00:05:08,120 --> 00:05:12,840 ‫dell'immagine perché è quello che noi desidera aggiornare in seguito e anche 100 00:05:12,840 --> 00:05:14,453 ‫l'array di immagini. 101 00:05:15,640 --> 00:05:20,300 ‫Creato a può anche andare e, naturalmente, abbiamo 102 00:05:20,300 --> 00:05:25,300 ‫bisogno di cambiare la lumaca, quindi il mountain biker. 103 00:05:27,780 --> 00:05:28,710 ‫Va bene? 104 00:05:28,710 --> 00:05:30,390 ‫E tra l'altro, avevamo bisogno 105 00:05:30,390 --> 00:05:34,200 ‫di creare un nuovo tour come questo in modo da avere effettivamente 106 00:05:34,200 --> 00:05:36,970 ‫i luoghi, il riepilogo e la descrizione e tutto 107 00:05:36,970 --> 00:05:41,030 ‫il resto, in modo che il turista possa visualizzare correttamente il nostro sito web. 108 00:05:41,030 --> 00:05:44,770 ‫Va bene, quindi inseriamolo e quindi dovrebbe 109 00:05:44,770 --> 00:05:49,270 ‫essere da qualche parte qui proprio alla fine, ok. 110 00:05:49,270 --> 00:05:54,270 ‫Quindi prendiamo l'ID qui e ora qui in 111 00:05:55,070 --> 00:05:59,020 ‫Postman, quindi aggiorniamo il tour. 112 00:05:59,020 --> 00:06:02,960 ‫Quindi lo passiamo qui e ora nel nostro corpo, 113 00:06:02,960 --> 00:06:07,960 ‫ricordiamo che abbiamo bisogno di passare dai dati grezzi a quelli del modulo. 114 00:06:08,104 --> 00:06:09,103 ‫Va bene? 115 00:06:11,490 --> 00:06:16,490 ‫Chiudiamo tutti questi qui e facciamo anche il login qui 116 00:06:17,090 --> 00:06:20,210 ‫come amministratore perché altrimenti l'aggiornamento del 117 00:06:20,210 --> 00:06:22,010 ‫tour non funzionerà. 118 00:06:23,070 --> 00:06:28,070 ‫Quindi admin@nators. io, va bene. 119 00:06:31,740 --> 00:06:35,508 ‫E quindi ora ricreiamo solo una richiesta del corpo qui simile 120 00:06:35,508 --> 00:06:38,210 ‫a quella che abbiamo appena specificato qui. 121 00:06:38,210 --> 00:06:42,070 ‫Quindi sostanzialmente simile a quello che si aspetta il nostro caricamento 122 00:06:42,070 --> 00:06:44,973 ‫multer, quindi una copertina e tre immagini. 123 00:06:47,060 --> 00:06:52,060 ‫Quindi, copertina dell'immagine, che è un file, quindi selezioniamolo. 124 00:06:55,670 --> 00:06:58,630 ‫E quindi qui abbiamo queste nuove foto 125 00:06:59,660 --> 00:07:02,050 ‫per i tour e usiamo effettivamente 126 00:07:02,050 --> 00:07:05,837 ‫questa prima qui come immagine di copertina e poi 127 00:07:08,450 --> 00:07:12,290 ‫immagini, mettiamo anche quella qui per archiviare, e poi 128 00:07:12,290 --> 00:07:14,543 ‫qui le altre tre. 129 00:07:16,420 --> 00:07:19,943 ‫E ora, come vedete, si chiameranno tutti immagini. 130 00:07:26,440 --> 00:07:29,940 ‫Ok, e possiamo avere solo un massimo di tre, 131 00:07:29,940 --> 00:07:32,070 ‫almeno solo tre di 132 00:07:32,070 --> 00:07:34,680 ‫loro verranno elaborati da multer, ok? 133 00:07:37,620 --> 00:07:40,490 ‫E in realtà qui vedi che abbiamo davvero 134 00:07:40,490 --> 00:07:43,380 ‫bisogno di ridimensionare questo perché sul nostro sito 135 00:07:43,380 --> 00:07:46,090 ‫web appaiono tutti in questo formato orizzontale e 136 00:07:46,090 --> 00:07:48,550 ‫non verticale come lo abbiamo qui. 137 00:07:48,550 --> 00:07:49,383 ‫Va bene? 138 00:07:49,383 --> 00:07:51,139 ‫Ed è per 139 00:07:51,139 --> 00:07:55,940 ‫questo che è necessario elaborare anche queste immagini, ok? 140 00:07:55,940 --> 00:07:58,590 ‫E ovviamente possiamo anche cambiare altre 141 00:07:58,590 --> 00:08:03,563 ‫cose qui, quindi diciamo che vogliamo cambiare il prezzo a 9-9-7, ok? 142 00:08:05,610 --> 00:08:09,690 ‫Ora, non invierò ancora questa richiesta perché non abbiamo 143 00:08:09,690 --> 00:08:12,500 ‫implementato alcuna logica per gestirla a 144 00:08:12,500 --> 00:08:15,280 ‫questo punto, giusto, perché non la 145 00:08:15,280 --> 00:08:17,260 ‫stiamo realmente caricando 146 00:08:17,260 --> 00:08:21,360 ‫nel file system, ma solo salvandola in memoria . 147 00:08:21,360 --> 00:08:23,870 ‫E così, solo per dare 148 00:08:23,870 --> 00:08:26,808 ‫un'occhiata veloce, creiamo il nostro prossimo middleware 149 00:08:26,808 --> 00:08:29,913 ‫qui, che sarà quello che elaborerà queste immagini. 150 00:08:31,250 --> 00:08:36,250 ‫Quindi esporta il punto ridimensiona le immagini del tour, quindi richiesta, 151 00:08:42,810 --> 00:08:47,810 ‫risposta e avanti, e ora consente di registrarle sulla console. 152 00:08:50,620 --> 00:08:53,840 ‫Va bene, e nel caso in cui abbiamo 153 00:08:53,840 --> 00:08:58,520 ‫più file, in realtà sono file dot su richiesta e non solo file. 154 00:08:58,520 --> 00:08:59,610 ‫Va bene? 155 00:08:59,610 --> 00:09:02,460 ‫Quindi questo qui fondamentalmente produrrà 156 00:09:04,030 --> 00:09:07,870 ‫file di punti di richiesta mentre i campi e 157 00:09:07,870 --> 00:09:12,603 ‫l'array produrranno entrambi file di punti di richiesta, quindi il plurale. 158 00:09:14,215 --> 00:09:16,420 ‫Va bene, allora accedi 159 00:09:16,420 --> 00:09:19,690 ‫alla console e poi chiamiamo next qui 160 00:09:19,690 --> 00:09:21,440 ‫in modo da 161 00:09:21,440 --> 00:09:25,000 ‫poter poi finire il ciclo di richiesta-risposta, ok. 162 00:09:25,000 --> 00:09:26,730 ‫Dagli un salvataggio e ora 163 00:09:26,730 --> 00:09:29,700 ‫tutto ciò che dobbiamo fare per testare effettivamente la richiesta 164 00:09:29,700 --> 00:09:32,790 ‫è aggiungere questi due nuovi middleware al gestore del percorso. 165 00:09:32,790 --> 00:09:37,130 ‫Va bene, quindi tour percorsi e proprio come con gli utenti, per semplificare 166 00:09:37,130 --> 00:09:39,600 ‫le cose qui, consentiremo solo il caricamento di 167 00:09:39,600 --> 00:09:41,953 ‫immagini su un aggiornamento del tour. 168 00:09:43,360 --> 00:09:48,360 ‫Quindi quaggiù è dove abbiamo quella richiesta di patch, va bene, 169 00:09:49,280 --> 00:09:52,320 ‫e quindi abbiamo già un 170 00:09:52,320 --> 00:09:56,180 ‫sacco di middleware, quindi proteggi, limita ad amministratori 171 00:09:56,180 --> 00:10:01,180 ‫e guide, e ora aggiungiamo anche il controller del tour, carica 172 00:10:03,160 --> 00:10:08,160 ‫le immagini del tour e ridimensiona il tour del controller immagini. 173 00:10:08,360 --> 00:10:13,130 ‫Quindi questo è davvero un bel stack di middleware proprio qui, ok? 174 00:10:13,130 --> 00:10:16,000 ‫E quindi penso che ora siamo pronti 175 00:10:16,000 --> 00:10:18,890 ‫per testare effettivamente la richiesta che abbiamo creato qui. 176 00:10:18,890 --> 00:10:21,830 ‫E ancora, ovviamente, non farà davvero nulla, non 177 00:10:21,830 --> 00:10:24,500 ‫salverà queste immagini da nessuna parte 178 00:10:24,500 --> 00:10:26,780 ‫e non aggiornerà il database, 179 00:10:26,780 --> 00:10:30,453 ‫ma per ora vogliamo solo vedere il risultato nella console. 180 00:10:31,370 --> 00:10:34,290 ‫Beh, dovrebbe aver effettivamente aggiornato il prezzo, 181 00:10:34,290 --> 00:10:37,010 ‫quindi diamo subito un'occhiata a questo. 182 00:10:37,010 --> 00:10:39,790 ‫Sì, quindi il prezzo ora è aggiornato, 183 00:10:39,790 --> 00:10:43,200 ‫ma di nuovo le immagini ovviamente no, va bene? 184 00:10:43,200 --> 00:10:46,810 ‫E ora qui li abbiamo nella console, quindi rendiamolo 185 00:10:46,810 --> 00:10:49,843 ‫un po' più grande e quindi qui 186 00:10:49,843 --> 00:10:53,400 ‫abbiamo la copertina dell'immagine in cui abbiamo ottenuto il 187 00:10:53,400 --> 00:10:56,520 ‫nome del campo, il nome originale e anche 188 00:10:56,520 --> 00:11:00,620 ‫il tipo MIME, ok, quindi vedi il buffer qui , 189 00:11:00,620 --> 00:11:03,230 ‫e quindi questa è fondamentalmente una 190 00:11:03,230 --> 00:11:05,240 ‫rappresentazione dell'immagine in memoria. 191 00:11:05,240 --> 00:11:06,810 ‫Ora è importante notare 192 00:11:06,810 --> 00:11:10,953 ‫che in realtà anche la copertina dell'immagine è un array, ok? 193 00:11:12,290 --> 00:11:13,590 ‫Quindi, quando 194 00:11:13,590 --> 00:11:16,480 ‫recupereremo l'immagine dalla copertina dell'immagine, dovremo 195 00:11:16,480 --> 00:11:19,660 ‫utilizzare il primo elemento di questo array. 196 00:11:19,660 --> 00:11:22,380 ‫E poi nelle immagini, qui è ovvio che 197 00:11:22,380 --> 00:11:24,700 ‫abbiamo un array e qui 198 00:11:24,700 --> 00:11:28,080 ‫per ciascuna delle immagini abbiamo un oggetto come questo. 199 00:11:28,080 --> 00:11:32,530 ‫Quindi con il nome originale, tour quattro, tre e due, e poi ognuno 200 00:11:32,530 --> 00:11:34,363 ‫di loro come buffer. 201 00:11:36,030 --> 00:11:40,860 ‫Va bene, quindi tutto è ben collegato e quindi tutto ciò che 202 00:11:40,860 --> 00:11:45,353 ‫dobbiamo fare ora è creare fondamentalmente questo ridimensionamento delle immagini del 203 00:11:46,290 --> 00:11:49,300 ‫tour, perché è qui che le immagini 204 00:11:49,300 --> 00:11:51,290 ‫verranno quindi elaborate e anche 205 00:11:51,290 --> 00:11:53,210 ‫salvate su disco. 206 00:11:53,210 --> 00:11:56,903 ‫Ok, questo è l'argomento della prossima lezione.