1 00:00:01,170 --> 00:00:03,440 ‫Narratore: Nella prima parte di 2 00:00:03,440 --> 00:00:06,140 ‫questa sezione impareremo tutto sul caricamento di immagini 3 00:00:06,140 --> 00:00:09,660 ‫con il pacchetto Multer e in questo particolare video inizieremo 4 00:00:09,660 --> 00:00:13,653 ‫a implementare il caricamento di immagini per le foto degli utenti. 5 00:00:15,230 --> 00:00:18,900 ‫Ma prima di iniziare, facciamo un po' di pulizia 6 00:00:18,900 --> 00:00:22,450 ‫veloce qui e liberiamoci di questo output costante dei 7 00:00:22,450 --> 00:00:24,570 ‫cookie che abbiamo qui. 8 00:00:24,570 --> 00:00:29,093 ‫Quindi è da qualche parte quaggiù e quindi è molto meglio. 9 00:00:30,430 --> 00:00:33,610 ‫Ora lavoreremo per caricare le foto 10 00:00:33,610 --> 00:00:38,010 ‫degli utenti e apriamo qui i percorsi degli utenti, ok. 11 00:00:38,010 --> 00:00:41,310 ‫Quindi, Multer è un middleware molto popolare per 12 00:00:41,310 --> 00:00:45,510 ‫gestire dati di moduli multiparte, che è un modulo nella codifica 13 00:00:45,510 --> 00:00:48,540 ‫utilizzato per caricare file da un modulo. 14 00:00:48,540 --> 00:00:51,200 ‫Quindi ricorda come nell'ultima sezione abbiamo 15 00:00:51,200 --> 00:00:55,160 ‫utilizzato un modulo codificato URL per aggiornare i dati dell'utente e 16 00:00:55,160 --> 00:00:58,570 ‫per questo abbiamo dovuto includere anche un middleware speciale. 17 00:00:58,570 --> 00:01:01,000 ‫E quindi Multer è fondamentalmente 18 00:01:01,000 --> 00:01:03,580 ‫un middleware per dati di moduli multiparte. 19 00:01:03,580 --> 00:01:05,770 ‫E ora ecco cosa faremo. 20 00:01:05,770 --> 00:01:08,460 ‫Consentiremo all'utente di caricare una foto sul 21 00:01:08,460 --> 00:01:11,064 ‫percorso Aggiornami e quindi, invece di 22 00:01:11,064 --> 00:01:14,430 ‫essere in grado di aggiornare e-mail e foto, gli 23 00:01:14,430 --> 00:01:18,620 ‫utenti saranno anche in grado di caricare le proprie foto utente. 24 00:01:18,620 --> 00:01:21,970 ‫Quindi, ancora una volta, iniziamo installando il 25 00:01:21,970 --> 00:01:25,330 ‫pacchetto di cui abbiamo bisogno e in realtà 26 00:01:25,330 --> 00:01:30,267 ‫creiamo una nuova finestra di terminale qui e quindi NPM installi Multer. 27 00:01:32,586 --> 00:01:37,437 ‫Va bene e qui vediamo che siamo su Multer 1. 4. 1. 28 00:01:38,420 --> 00:01:41,160 ‫E così di nuovo in caso di problemi 29 00:01:41,160 --> 00:01:43,490 ‫con questo pacchetto, assicurati di installare 30 00:01:43,490 --> 00:01:45,983 ‫la stessa versione che sto usando qui. 31 00:01:47,241 --> 00:01:48,074 ‫Va bene. 32 00:01:49,150 --> 00:01:51,313 ‫Quindi, includiamolo qui. 33 00:01:52,930 --> 00:01:57,070 ‫Quindi Multer, richiedi, Multer. 34 00:01:58,840 --> 00:02:03,040 ‫Quindi, facile e ora dobbiamo configurare un cosiddetto 35 00:02:03,040 --> 00:02:05,780 ‫caricamento Multer e quindi usarlo. 36 00:02:05,780 --> 00:02:08,030 ‫E facciamolo qui all'inizio e 37 00:02:09,330 --> 00:02:14,330 ‫chiamiamolo Upload e chiamiamo la funzione Multer che abbiamo appena incluso 38 00:02:16,380 --> 00:02:19,090 ‫prima e poi passiamo un oggetto 39 00:02:19,090 --> 00:02:21,160 ‫per alcune opzioni. 40 00:02:21,160 --> 00:02:23,730 ‫E per ora l'unica opzione 41 00:02:23,730 --> 00:02:26,180 ‫che specificheremo è 42 00:02:26,180 --> 00:02:31,180 ‫la destinazione e la imposterò su Public/image/users, va bene. 43 00:02:34,940 --> 00:02:36,870 ‫E quindi questa è esattamente la 44 00:02:36,870 --> 00:02:38,780 ‫cartella in cui vogliamo salvare tutte 45 00:02:38,780 --> 00:02:40,570 ‫le immagini che vengono caricate. 46 00:02:40,570 --> 00:02:45,570 ‫Quindi ecco qui, Pubblico, Immagine e Utenti, come tutte le immagini 47 00:02:45,740 --> 00:02:48,063 ‫per tutti gli utenti 48 00:02:48,063 --> 00:02:50,750 ‫che abbiamo già nel nostro database. 49 00:02:50,750 --> 00:02:53,770 ‫Giusto e ovviamente possiamo configurarlo in un modo 50 00:02:53,770 --> 00:02:56,480 ‫molto più complesso e lo faremo nella 51 00:02:56,480 --> 00:02:58,670 ‫nostra prossima lezione, ma 52 00:02:58,670 --> 00:03:02,190 ‫per ora voglio davvero che tu mi presenti questo 53 00:03:02,190 --> 00:03:04,697 ‫pacchetto e, a proposito, avremmo potuto 54 00:03:04,697 --> 00:03:08,010 ‫semplicemente chiamare la funzione Multer senza alcuna opzione. 55 00:03:08,010 --> 00:03:10,940 ‫Quindi senza questo qui e poi l'immagine caricata sarebbe 56 00:03:10,940 --> 00:03:13,749 ‫semplicemente archiviata in memoria e non salvata da 57 00:03:13,749 --> 00:03:17,590 ‫nessuna parte sul disco, ma ovviamente a questo punto non è quello 58 00:03:17,590 --> 00:03:21,290 ‫che vogliamo e quindi dobbiamo almeno specificare questa opzione di destinazione. 59 00:03:21,290 --> 00:03:23,620 ‫E con questo il nostro file viene 60 00:03:23,620 --> 00:03:26,450 ‫poi realmente caricato in una directory nel nostro file system. 61 00:03:26,450 --> 00:03:29,080 ‫E l'ho già detto prima, 62 00:03:29,080 --> 00:03:31,960 ‫ma assicuriamoci di essere sulla stessa linea, 63 00:03:31,960 --> 00:03:34,870 ‫che ovviamente le immagini non vengono caricate 64 00:03:34,870 --> 00:03:37,770 ‫direttamente nel database, le carichiamo semplicemente nel 65 00:03:37,770 --> 00:03:40,700 ‫nostro file system e poi nel database 66 00:03:40,700 --> 00:03:43,510 ‫metti un collegamento fondamentalmente a quell'immagine. 67 00:03:43,510 --> 00:03:46,170 ‫Quindi in questo caso in ogni 68 00:03:46,170 --> 00:03:49,450 ‫documento utente dovremo nominare tutto il file caricato, ok. 69 00:03:49,450 --> 00:03:51,690 ‫Ancora una volta, non lo faremo in questo video, 70 00:03:51,690 --> 00:03:53,550 ‫ma lo faremo un po' più tardi. 71 00:03:53,550 --> 00:03:55,603 ‫Per ora facciamolo funzionare. 72 00:03:56,490 --> 00:03:59,000 ‫Ad ogni modo, quello che dobbiamo fare 73 00:03:59,000 --> 00:04:02,150 ‫ora è usare questo caricamento qui per creare davvero una 74 00:04:02,150 --> 00:04:05,223 ‫funzione middleware che possiamo inserire qui nel percorso Aggiornami. 75 00:04:06,100 --> 00:04:09,343 ‫Quindi ecco, e funziona così. 76 00:04:10,700 --> 00:04:14,670 ‫Quindi carica, punto singolo, ed è single perché qui vogliamo 77 00:04:14,670 --> 00:04:17,810 ‫solo aggiornare una singola immagine e poi qui 78 00:04:17,810 --> 00:04:20,830 ‫in single passiamo il nome del campo 79 00:04:20,830 --> 00:04:22,993 ‫che conterrà l'immagine da caricare. 80 00:04:24,000 --> 00:04:26,480 ‫E così sarà la foto, ok. 81 00:04:26,480 --> 00:04:29,023 ‫E con campo intendo il 82 00:04:29,023 --> 00:04:31,620 ‫campo nel modulo che caricherà l'immagine. 83 00:04:31,620 --> 00:04:34,400 ‫Va bene, ha senso? 84 00:04:34,400 --> 00:04:38,040 ‫Quindi, ancora una volta, abbiamo incluso il pacchetto 85 00:04:38,040 --> 00:04:41,560 ‫Multer e quindi abbiamo creato un caricamento. 86 00:04:41,560 --> 00:04:44,700 ‫E questo caricamento serve solo per definire un paio 87 00:04:44,700 --> 00:04:48,640 ‫di impostazioni in cui in questo esempio definiamo solo la destinazione, 88 00:04:48,640 --> 00:04:52,260 ‫quindi utilizziamo tale caricamento per creare un nuovo middleware che 89 00:04:52,260 --> 00:04:55,560 ‫possiamo quindi aggiungere a questo stack del percorso che 90 00:04:55,560 --> 00:04:58,400 ‫vogliamo utilizzare per caricare il file . 91 00:04:58,400 --> 00:05:01,130 ‫Quindi per questo diciamo upload dot single 92 00:05:01,130 --> 00:05:03,390 ‫perché abbiamo solo un singolo 93 00:05:03,390 --> 00:05:06,160 ‫file e poi alla fine specifichiamo il nome 94 00:05:06,160 --> 00:05:08,570 ‫del campo che conterrà questo file. 95 00:05:08,570 --> 00:05:11,600 ‫Ok, quindi questo middleware si occuperà di 96 00:05:11,600 --> 00:05:14,610 ‫prendere il file e sostanzialmente copiarlo nella 97 00:05:14,610 --> 00:05:16,960 ‫destinazione che abbiamo specificato. 98 00:05:16,960 --> 00:05:19,040 ‫E poi, ovviamente, chiamerà il 99 00:05:19,040 --> 00:05:22,083 ‫prossimo middleware nello stack che è Update Me. 100 00:05:23,210 --> 00:05:26,470 ‫Inoltre, questo middleware qui metterà il file 101 00:05:26,470 --> 00:05:28,600 ‫o almeno alcune informazioni 102 00:05:28,600 --> 00:05:30,810 ‫sul file nell'oggetto richiesta e 103 00:05:30,810 --> 00:05:33,080 ‫quindi diamo un'occhiata a questo. 104 00:05:33,080 --> 00:05:36,123 ‫Quindi andiamo alla funzione Aggiornami. 105 00:05:38,490 --> 00:05:42,320 ‫Quindi proprio qui e proprio qui 106 00:05:43,300 --> 00:05:48,163 ‫all'inizio diciamo console dot log, reg dot file. 107 00:05:49,630 --> 00:05:50,463 ‫Va bene? 108 00:05:51,410 --> 00:05:55,430 ‫E voglio anche dare un'occhiata al corpo. 109 00:05:55,430 --> 00:05:58,307 ‫Fantastico e quindi con questo ora siamo 110 00:05:58,307 --> 00:06:02,320 ‫effettivamente pronti per testarlo e per ora lo testeremo nel 111 00:06:02,320 --> 00:06:04,820 ‫postino ma ovviamente in seguito 112 00:06:04,820 --> 00:06:08,253 ‫aggiungeremo anche questa funzionalità al modulo, va bene. 113 00:06:09,220 --> 00:06:13,720 ‫Quindi andiamo dal postino qui e ad Aggiornami. 114 00:06:13,720 --> 00:06:16,023 ‫Quindi fondamentalmente per aggiornare l'utente corrente. 115 00:06:17,380 --> 00:06:20,430 ‫E l'utente che voglio aggiornare si chiama Leo, 116 00:06:20,430 --> 00:06:23,700 ‫quindi portiamolo qui da Compass, o in realtà penso 117 00:06:23,700 --> 00:06:26,710 ‫che non sia nemmeno necessario perché nel 118 00:06:26,710 --> 00:06:30,460 ‫nostro login abbiamo già questo tipo di indirizzo email e 119 00:06:30,460 --> 00:06:35,010 ‫la sua email è leo@example. com e la 120 00:06:35,010 --> 00:06:38,090 ‫password è sempre la stessa. 121 00:06:38,090 --> 00:06:41,390 ‫E quindi, ovviamente, prima dobbiamo accedere come utente e 122 00:06:41,390 --> 00:06:44,653 ‫quindi ora andiamo avanti e quindi aggiorniamo all'utente. 123 00:06:46,620 --> 00:06:50,010 ‫Quindi nel corpo abbiamo il nome e il ruolo. 124 00:06:50,010 --> 00:06:53,593 ‫Quindi aggiorniamoci solo, diciamo il nome qui. 125 00:06:54,560 --> 00:06:59,500 ‫Quindi il nome attuale è Leo Gillespie o Gillespie, non 126 00:06:59,500 --> 00:07:01,113 ‫so come dirlo. 127 00:07:02,800 --> 00:07:07,800 ‫Aggiungiamo qualcosa qui nel mezzo, ok. 128 00:07:07,870 --> 00:07:11,283 ‫E ora finalmente specifichiamo la proprietà della foto, o in 129 00:07:13,270 --> 00:07:16,370 ‫realtà non dovremmo farlo in questo modo, ma invece 130 00:07:16,370 --> 00:07:21,100 ‫dovremmo andare qui per formare i dati, ok, perché questo è il modo in 131 00:07:21,100 --> 00:07:22,810 ‫cui possiamo inviare dati 132 00:07:22,810 --> 00:07:25,543 ‫di moduli in più parti, va bene. 133 00:07:26,410 --> 00:07:31,410 ‫Quindi, copiamo solo il nome qui ed è Nome. 134 00:07:33,470 --> 00:07:37,813 ‫Va bene, quindi qui la chiave è Nome e 135 00:07:37,813 --> 00:07:40,763 ‫poi il valore è questo. 136 00:07:42,350 --> 00:07:46,770 ‫Successivamente, infine, specifichiamo il campo della foto e quindi 137 00:07:46,770 --> 00:07:50,210 ‫qui possiamo effettivamente specificare ciò che vogliamo. 138 00:07:50,210 --> 00:07:52,700 ‫E così invece del testo, che è 139 00:07:52,700 --> 00:07:56,520 ‫l'impostazione predefinita, possiamo specificare il file e quindi qui possiamo selezionare il 140 00:07:56,520 --> 00:07:58,163 ‫file che vogliamo caricare. 141 00:07:59,240 --> 00:08:04,240 ‫Quindi quel file, quell'immagine, è di nuovo qui nei nostri dati def, poi 142 00:08:04,350 --> 00:08:07,470 ‫nell'immagine e poi qui l'immagine di Leo. 143 00:08:07,470 --> 00:08:10,430 ‫Ed ecco perché mostra questo utente. 144 00:08:10,430 --> 00:08:13,800 ‫Ok, quindi fai clic su Apri e ora penso che 145 00:08:13,800 --> 00:08:16,193 ‫siamo pronti per inviare la richiesta. 146 00:08:17,960 --> 00:08:22,200 ‫Va bene, abbiamo avuto successo e ovviamente, come ho detto prima, la 147 00:08:22,200 --> 00:08:25,880 ‫foto ovviamente non si è aggiornata qui nell'output del database 148 00:08:25,880 --> 00:08:28,450 ‫perché è per la prossima lezione. 149 00:08:28,450 --> 00:08:31,630 ‫Per ora vogliamo solo caricare davvero questa immagine in 150 00:08:31,630 --> 00:08:33,803 ‫quella cartella che abbiamo specificato. 151 00:08:34,960 --> 00:08:39,180 ‫Bene, ora diamo anche un'occhiata qui al nostro output e quindi 152 00:08:39,180 --> 00:08:43,430 ‫qui abbiamo request dot file, che è questo, e quindi otteniamo tutti 153 00:08:43,430 --> 00:08:46,460 ‫i tipi di informazioni su di esso. 154 00:08:46,460 --> 00:08:50,910 ‫Quindi il nome originale, è la destinazione che abbiamo specificato, il nuovo 155 00:08:50,910 --> 00:08:54,370 ‫nome del file qui e anche la dimensione. 156 00:08:54,370 --> 00:08:57,980 ‫Ok, questo è request dot file e poi ricorda che 157 00:08:57,980 --> 00:08:59,920 ‫abbiamo anche registrato il corpo. 158 00:08:59,920 --> 00:09:03,810 ‫E così il corpo ora è solo il nome, d'accordo. 159 00:09:03,810 --> 00:09:07,100 ‫Quindi la nostra analisi del corpo non è realmente in grado di 160 00:09:07,100 --> 00:09:09,470 ‫gestire i file ed è per questo che 161 00:09:09,470 --> 00:09:11,790 ‫il file non viene visualizzato affatto nel 162 00:09:11,790 --> 00:09:15,920 ‫corpo e, naturalmente, questo è l'intero motivo per cui abbiamo effettivamente bisogno del pacchetto Multer. 163 00:09:15,920 --> 00:09:19,570 ‫Comunque, ora diamo un'occhiata alla nostra cartella e quindi qui 164 00:09:19,570 --> 00:09:24,241 ‫abbiamo l'immagine, gli utenti, e poi da qualche parte qui dovrebbe esserci l'immagine 165 00:09:24,241 --> 00:09:26,890 ‫che abbiamo appena caricato ma non riesco 166 00:09:28,150 --> 00:09:30,160 ‫davvero a vederla qui. 167 00:09:30,160 --> 00:09:33,313 ‫Aggiorniamoci, ah ed infatti eccolo qua. 168 00:09:34,960 --> 00:09:37,890 ‫Quindi se facciamo clic su di esso ora non 169 00:09:37,890 --> 00:09:39,840 ‫possiamo davvero vederlo perché come 170 00:09:39,840 --> 00:09:42,600 ‫puoi vedere qui non ha nemmeno un'estensione, ok. 171 00:09:42,600 --> 00:09:46,240 ‫Ed è per questo che non possiamo davvero aprirlo a questo punto. 172 00:09:46,240 --> 00:09:49,690 ‫Quindi il file è davvero apparso qui nella nostra cartella 173 00:09:49,690 --> 00:09:52,320 ‫e quindi abbiamo il caricamento effettivamente funzionante. 174 00:09:52,320 --> 00:09:54,870 ‫Beh, almeno un po', ma non 175 00:09:54,870 --> 00:09:57,350 ‫siamo davvero dove vogliamo, giusto. 176 00:09:57,350 --> 00:09:59,960 ‫Quindi vogliamo dargli un nome di file migliore 177 00:09:59,960 --> 00:10:02,100 ‫e vogliamo anche riorganizzare un 178 00:10:02,100 --> 00:10:04,690 ‫po' questo codice che abbiamo a questo punto. 179 00:10:04,690 --> 00:10:07,123 ‫E quindi facciamolo nel prossimo video.