1 00:00:01,290 --> 00:00:03,840 ‫Docente: Quindi ora consentiamo agli utenti 2 00:00:03,840 --> 00:00:07,883 ‫di caricare le loro foto direttamente sul nostro sito web. 3 00:00:09,610 --> 00:00:11,640 ‫E quindi questo è ciò che vogliamo. 4 00:00:11,640 --> 00:00:13,760 ‫Quando facciamo clic qui, in pratica 5 00:00:13,760 --> 00:00:15,915 ‫vogliamo aprire una nuova finestra per 6 00:00:15,915 --> 00:00:19,370 ‫la quale possiamo selezionare una nuova immagine da caricare e 7 00:00:19,370 --> 00:00:21,380 ‫quindi quando facciamo clic 8 00:00:21,380 --> 00:00:23,990 ‫su questo pulsante e inviamo un modulo, ovviamente, 9 00:00:23,990 --> 00:00:27,520 ‫vogliamo caricare quell'immagine nel nostro backend e aggiornare l'utente , Giusto. 10 00:00:27,520 --> 00:00:29,528 ‫E quindi il primo passo 11 00:00:29,528 --> 00:00:33,400 ‫per farlo sarà aggiungere un nuovo elemento di input al nostro html. 12 00:00:33,400 --> 00:00:35,490 ‫Quindi fondamentalmente al nostro modello di pacchetto che 13 00:00:35,490 --> 00:00:37,850 ‫consentirà quindi a quel selettore di file di aprirsi 14 00:00:37,850 --> 00:00:39,503 ‫quando si fa clic qui. 15 00:00:40,930 --> 00:00:43,800 ‫Quindi, andiamo alle nostre viste 16 00:00:43,800 --> 00:00:48,800 ‫e all'account e quindi è questo modulo in cui 17 00:00:49,010 --> 00:00:51,720 ‫ora dobbiamo aggiungere quell'input. 18 00:00:51,720 --> 00:00:55,420 ‫Quindi in questo momento abbiamo quel link qui che dice nuova foto. 19 00:00:55,420 --> 00:00:58,800 ‫Ma ovviamente non è un collegamento che useremo. 20 00:00:58,800 --> 00:01:01,280 ‫Quindi questo era davvero solo un segnaposto. 21 00:01:01,280 --> 00:01:03,360 ‫E quindi liberiamocene. 22 00:01:03,360 --> 00:01:05,063 ‫Quindi quello di cui abbiamo bisogno è un input. 23 00:01:06,280 --> 00:01:07,803 ‫Off per digitare il file. 24 00:01:09,955 --> 00:01:13,110 ‫Va bene, quindi prima, per il nome avevamo 25 00:01:13,110 --> 00:01:15,980 ‫un input con il tipo di testo. 26 00:01:15,980 --> 00:01:19,040 ‫Abbiamo anche input con il tipo di 27 00:01:19,040 --> 00:01:22,925 ‫email e ce ne sono anche di speciali per la password. 28 00:01:22,925 --> 00:01:26,210 ‫Quindi inserisci la password e quindi 29 00:01:26,210 --> 00:01:30,283 ‫i file, ovviamente ce n'è uno per i file. 30 00:01:31,380 --> 00:01:35,263 ‫Possiamo quindi specificare quale tipo di file accettiamo effettivamente. 31 00:01:38,920 --> 00:01:40,950 ‫E possiamo fare qualcosa del genere. 32 00:01:40,950 --> 00:01:43,410 ‫Immagine e poi tutti. 33 00:01:43,410 --> 00:01:46,210 ‫Quindi fondamentalmente tutti i formati ottengono le loro immagini, quindi 34 00:01:46,210 --> 00:01:49,010 ‫quelli che hanno un tipo di mente che inizia 35 00:01:49,010 --> 00:01:50,823 ‫con l'immagine sono accettati qui. 36 00:01:53,054 --> 00:01:55,780 ‫Ora diamo anche a questo qui un 37 00:01:55,780 --> 00:01:59,930 ‫nome di classe in modo che appaia ben formattato sulla nostra pagina. 38 00:01:59,930 --> 00:02:03,660 ‫E quindi questo è il nome della classe che ho nel mio css. 39 00:02:03,660 --> 00:02:06,940 ‫E ora assegnandogli anche un ID in modo che possiamo 40 00:02:06,940 --> 00:02:08,440 ‫selezionarlo in java script. 41 00:02:09,300 --> 00:02:12,690 ‫Aggiungilo come foto e infine, proprio come gli 42 00:02:12,690 --> 00:02:15,840 ‫altri campi, gli diamo anche un nome. 43 00:02:15,840 --> 00:02:20,420 ‫Quindi anche il nome della foto. 44 00:02:20,420 --> 00:02:23,093 ‫E ovviamente è foto perché è il nome 45 00:02:23,093 --> 00:02:25,680 ‫che abbiamo nel nostro documento utente ed 46 00:02:25,680 --> 00:02:29,063 ‫è anche il nome del campo che multer si aspetta. 47 00:02:30,106 --> 00:02:34,410 ‫Quindi questo qui è upload e quindi specifichiamo anche un'etichetta 48 00:02:34,410 --> 00:02:35,483 ‫per questo. 49 00:02:37,650 --> 00:02:40,293 ‫E lo impostiamo su quattro 50 00:02:40,293 --> 00:02:44,110 ‫e poi sull'ID dell'elemento di input, va bene. 51 00:02:44,110 --> 00:02:45,570 ‫Quindi non sono sicuro che 52 00:02:45,570 --> 00:02:47,890 ‫tu abbia familiarità con come funziona in html, 53 00:02:47,890 --> 00:02:49,640 ‫ma non è nemmeno molto importante. 54 00:02:51,329 --> 00:02:53,600 ‫Quindi il modo in cui accade è 55 00:02:53,600 --> 00:02:56,320 ‫che quando facciamo clic su questa etichetta qui, attiverà 56 00:02:56,320 --> 00:02:58,610 ‫effettivamente l'elemento di input che ha l'ID 57 00:02:58,610 --> 00:03:00,500 ‫che specifichiamo qui nel modulo. 58 00:03:00,500 --> 00:03:03,870 ‫E quindi in quel caso quella è la foto, va bene. 59 00:03:03,870 --> 00:03:05,343 ‫E in realtà 60 00:03:05,343 --> 00:03:09,403 ‫è questa etichetta qui che farà scegliere al testo una nuova foto. 61 00:03:11,030 --> 00:03:12,950 ‫E così quando faremo clic 62 00:03:12,950 --> 00:03:14,597 ‫sull'etichetta, attiverà questo input 63 00:03:14,597 --> 00:03:16,830 ‫che a sua volta aprirà la finestra 64 00:03:16,830 --> 00:03:18,913 ‫da cui possiamo selezionare un file. 65 00:03:20,060 --> 00:03:23,090 ‫E quindi questo è tutto ciò che dobbiamo fare per l'input qui. 66 00:03:23,090 --> 00:03:26,290 ‫Ora, proprio come prima, ci sono due modi possibili 67 00:03:26,290 --> 00:03:28,710 ‫per inviare questi dati al server. 68 00:03:28,710 --> 00:03:31,480 ‫Quindi, prima, senza l'API come abbiamo fatto in 69 00:03:31,480 --> 00:03:32,840 ‫una lezione precedente. 70 00:03:32,840 --> 00:03:35,470 ‫Troviamo già l'azione che vogliamo intraprendere 71 00:03:35,470 --> 00:03:37,370 ‫e anche il metodo. 72 00:03:37,370 --> 00:03:38,760 ‫E con ciò i 73 00:03:38,760 --> 00:03:41,180 ‫dati vengono quindi inviati direttamente al server. 74 00:03:41,180 --> 00:03:43,130 ‫Ora, se volessimo inviare un 75 00:03:43,130 --> 00:03:45,440 ‫file utilizzando questo metodo, dovremmo specificare 76 00:03:45,440 --> 00:03:47,220 ‫un'altra opzione qui. 77 00:03:47,220 --> 00:03:49,801 ‫E questo è il tipo enc. 78 00:03:49,801 --> 00:03:54,520 ‫Quindi il tipo enc dovrebbe essere costituito da dati di moduli in più parti. 79 00:03:54,520 --> 00:03:59,520 ‫Quindi dati in più parti del modulo slash, va bene. 80 00:04:02,530 --> 00:04:06,090 ‫E così anche qui, abbiamo questo nome in più parti. 81 00:04:06,090 --> 00:04:07,948 ‫E quindi, come abbiamo detto 82 00:04:07,948 --> 00:04:11,220 ‫prima, il multipart serve sempre per l'invio di file al server. 83 00:04:11,220 --> 00:04:13,864 ‫E ancora una volta abbiamo effettivamente bisogno del 84 00:04:13,864 --> 00:04:17,164 ‫middleware multer per gestire questi dati di moduli multiparte, d'accordo. 85 00:04:17,164 --> 00:04:20,650 ‫E in realtà il nome multer deriva da multi-part. 86 00:04:20,650 --> 00:04:23,317 ‫Quindi mult, multer, ok. 87 00:04:23,317 --> 00:04:26,830 ‫Comunque, ancora una volta, se volessimo inviare i dati 88 00:04:26,830 --> 00:04:29,320 ‫senza un'API, dovremmo sempre specificare questo 89 00:04:29,320 --> 00:04:31,200 ‫tipo di enc. 90 00:04:31,200 --> 00:04:33,740 ‫Altrimenti il modulo ignorerebbe semplicemente il file 91 00:04:33,740 --> 00:04:35,623 ‫e non lo invierebbe, ok. 92 00:04:35,623 --> 00:04:38,370 ‫Ma come già sappiamo, in 93 00:04:38,370 --> 00:04:41,780 ‫realtà lo stiamo usando con l'API, giusto. 94 00:04:41,780 --> 00:04:44,727 ‫E quindi non abbiamo bisogno di specificare 95 00:04:44,727 --> 00:04:48,630 ‫questo tipo enc ma dovremo farlo a livello di codice. 96 00:04:48,630 --> 00:04:51,382 ‫E quindi facciamolo davvero. 97 00:04:51,382 --> 00:04:54,180 ‫Quindi ora inviamo i nostri dati, inclusa 98 00:04:54,180 --> 00:04:56,920 ‫ovviamente la foto eseguendo una 99 00:04:56,920 --> 00:04:59,970 ‫chiamata API come abbiamo fatto nell'ultima sezione. 100 00:04:59,970 --> 00:05:04,100 ‫E quindi ora dobbiamo aprire nella nostra cartella pubblica e 101 00:05:04,100 --> 00:05:08,973 ‫dal loro js, apriamo index. js. 102 00:05:10,360 --> 00:05:13,560 ‫E quindi proprio qui è dove 103 00:05:13,560 --> 00:05:17,010 ‫effettivamente inviamo i dati da aggiornare sul server. 104 00:05:17,010 --> 00:05:19,260 ‫Beh, in realtà non li 105 00:05:19,260 --> 00:05:21,960 ‫stiamo inviando qui, ma li selezioniamo dal modulo 106 00:05:21,960 --> 00:05:24,790 ‫e poi li passiamo alle impostazioni di aggiornamento. 107 00:05:24,790 --> 00:05:27,260 ‫Va bene, ma ora ricordi come ho detto 108 00:05:27,260 --> 00:05:29,590 ‫che avevamo bisogno di ricreare a 109 00:05:29,590 --> 00:05:32,660 ‫livello di codice i dati di un modulo multiparte? 110 00:05:32,660 --> 00:05:34,893 ‫E quindi dobbiamo farlo in questo modo. 111 00:05:42,020 --> 00:05:46,740 ‫Chiamiamolo modulo e quindi nuovi dati del modulo. 112 00:05:48,580 --> 00:05:51,200 ‫Va bene, e ora su quel 113 00:05:51,200 --> 00:05:53,883 ‫modulo dobbiamo continuare ad aggiungere nuovi dati. 114 00:05:53,883 --> 00:05:57,152 ‫E fondamentalmente un'aggiunta per ciascuno dei dati 115 00:05:57,152 --> 00:05:59,143 ‫che vogliamo inviare. 116 00:06:00,370 --> 00:06:04,400 ‫Quindi forma. append e il primo è il nome. 117 00:06:04,400 --> 00:06:08,250 ‫Quindi specifichiamo qui il nome e poi il valore del nome. 118 00:06:08,250 --> 00:06:11,000 ‫E quindi questo è ovviamente questo. 119 00:06:11,000 --> 00:06:15,363 ‫Quindi prendiamolo, incolliamolo qui e duplichiamolo. 120 00:06:16,870 --> 00:06:19,653 ‫E il prossimo è l'e-mail, ok. 121 00:06:20,690 --> 00:06:24,580 ‫Quindi sbarazziamoci di questo entra nelle impostazioni di aggiornamento. 122 00:06:24,580 --> 00:06:28,040 ‫Quindi passiamo il modulo, ok. 123 00:06:28,040 --> 00:06:30,560 ‫E o una chiamata di testo 124 00:06:30,560 --> 00:06:32,350 ‫che utilizza axios riconoscerà 125 00:06:32,350 --> 00:06:34,480 ‫effettivamente questa forma qui come 126 00:06:34,480 --> 00:06:37,550 ‫un oggetto e funzionerà esattamente come prima, ok. 127 00:06:37,550 --> 00:06:39,900 ‫Quindi qui nelle impostazioni di aggiornamento 128 00:06:39,900 --> 00:06:42,178 ‫in cui passiamo i 129 00:06:42,178 --> 00:06:44,980 ‫dati, che vengono poi passati qui nella 130 00:06:44,980 --> 00:06:47,543 ‫richiesta axios, non è necessario modificare nulla. 131 00:06:49,090 --> 00:06:51,810 ‫Va bene, quindi questo è equivalente a quello che 132 00:06:51,810 --> 00:06:54,380 ‫avevamo prima con nome ed e-mail, ma ora 133 00:06:54,380 --> 00:06:57,050 ‫ovviamente aggiungiamo anche la foto che è l'intera 134 00:06:57,050 --> 00:06:59,380 ‫ragione per cui ora dobbiamo farlo 135 00:06:59,380 --> 00:07:00,580 ‫in questo modo. 136 00:07:02,590 --> 00:07:07,590 ‫Quindi forma. aggiungi di nuovo poi il nome che 137 00:07:07,650 --> 00:07:10,400 ‫vogliamo dargli è ovviamente di nuovo, foto e 138 00:07:12,093 --> 00:07:12,970 ‫poi documento. getelementbyid che 139 00:07:14,176 --> 00:07:22,930 ‫è anche foto ma ora non lo è . valore ma invece . 140 00:07:22,930 --> 00:07:22,930 ‫file, va bene. 141 00:07:22,930 --> 00:07:25,920 ‫E questi file 142 00:07:25,920 --> 00:07:28,170 ‫sono in realtà nell'array e quindi poiché 143 00:07:28,170 --> 00:07:30,260 ‫ce n'è solo uno, dobbiamo selezionare 144 00:07:30,260 --> 00:07:33,260 ‫quel primo elemento nell'array e quindi questo è zero. 145 00:07:33,260 --> 00:07:34,733 ‫Va bene, e in 146 00:07:36,880 --> 00:07:40,810 ‫realtà registriamo questo modulo sulla console finché non diamo una rapida occhiata a 147 00:07:40,810 --> 00:07:42,340 ‫cosa sia effettivamente questo modulo. 148 00:07:43,360 --> 00:07:45,870 ‫Ma in poche parole, come ho detto prima, fondamentalmente 149 00:07:45,870 --> 00:07:48,280 ‫ricreiamo questi dati del modulo in più parti. 150 00:07:48,280 --> 00:07:52,480 ‫E quindi questo è il motivo per cui si chiama dati del 151 00:07:52,480 --> 00:07:55,200 ‫modulo perché, beh, quei dati del modulo 152 00:07:55,200 --> 00:07:58,640 ‫sono anche qui in questo tipo enc multiparte, ok. 153 00:07:58,640 --> 00:08:02,173 ‫Quindi, immagino che sia abbastanza per 154 00:08:03,750 --> 00:08:06,450 ‫noi ora provarlo. 155 00:08:06,450 --> 00:08:08,670 ‫Quindi, come ho detto, nelle impostazioni di 156 00:08:08,670 --> 00:08:10,860 ‫aggiornamento, non c'è nulla che dobbiamo 157 00:08:10,860 --> 00:08:13,030 ‫cambiare e anche l'endpoint aggiornami 158 00:08:13,030 --> 00:08:15,320 ‫in cui stiamo inviando questo strumento di 159 00:08:15,320 --> 00:08:18,630 ‫richiesta, quindi anche questo è già funzionante e pronto ad 160 00:08:18,630 --> 00:08:21,040 ‫accettare immagini e persino a ridimensionarle, giusto. 161 00:08:21,040 --> 00:08:25,230 ‫E quindi ora andiamo avanti e proviamo questo. 162 00:08:25,230 --> 00:08:28,319 ‫E quindi ricarichiamolo ancora una volta. 163 00:08:28,319 --> 00:08:32,050 ‫E quindi vediamo, e in effetti 164 00:08:32,050 --> 00:08:36,031 ‫ora otteniamo il nostro selettore di file fondamentalmente. 165 00:08:36,031 --> 00:08:38,450 ‫Quindi questa finestra in cui ora possiamo 166 00:08:38,450 --> 00:08:40,550 ‫selezionare il file e quello che 167 00:08:40,550 --> 00:08:42,370 ‫farò è fondamentalmente rimettere 168 00:08:42,370 --> 00:08:45,620 ‫a posto l'immagine originale che avevamo su questo utente. 169 00:08:45,620 --> 00:08:47,730 ‫Quindi questo è su 170 00:08:47,730 --> 00:08:52,513 ‫desktop, natours, public, image users, ed era l'utente 11, quindi questo. 171 00:08:54,060 --> 00:08:58,700 ‫E quindi ora è stato caricato. 172 00:08:58,700 --> 00:09:00,050 ‫Quindi apri, salva nelle impostazioni e l'aggiornamento dei dati è andato a buon fine. 173 00:09:01,940 --> 00:09:06,940 ‫Ora non si riflette qui immediatamente. 174 00:09:07,780 --> 00:09:10,180 ‫Né qui né quassù, ma 175 00:09:10,180 --> 00:09:13,280 ‫dovrebbe essere così una volta caricata questa pagina. 176 00:09:13,280 --> 00:09:15,393 ‫E potremmo davvero farlo anche con 177 00:09:16,410 --> 00:09:19,540 ‫lo script java, ma in realtà è un sacco di lavoro. 178 00:09:19,540 --> 00:09:21,620 ‫Avevo provato a farlo e l'ho 179 00:09:21,620 --> 00:09:23,740 ‫fatto, ma poi ho pensato che fosse 180 00:09:23,740 --> 00:09:26,800 ‫troppo lavoro e che non valesse la pena implementarlo qui. 181 00:09:26,800 --> 00:09:29,630 ‫Ma comunque, solo per testare se ha funzionato 182 00:09:29,630 --> 00:09:32,040 ‫davvero, dobbiamo ora ricaricare la pagina. 183 00:09:32,040 --> 00:09:34,320 ‫E lo ha fatto. 184 00:09:34,320 --> 00:09:35,840 ‫Ecco ora la nuova immagine che abbiamo appena caricato. 185 00:09:35,840 --> 00:09:39,320 ‫Quindi, fantastico. 186 00:09:39,320 --> 00:09:41,450 ‫Diamo un'occhiata alla cartella stessa. 187 00:09:41,450 --> 00:09:44,210 ‫Se è effettivamente lì, anche, e 188 00:09:44,210 --> 00:09:46,530 ‫se è stato trasformato correttamente. 189 00:09:46,530 --> 00:09:48,810 ‫Quindi questa è un'immagine. 190 00:09:48,810 --> 00:09:52,030 ‫Ricarichiamolo qui. 191 00:09:52,030 --> 00:09:53,293 ‫E quindi ora non sono sicuro di quale sia. 192 00:09:57,240 --> 00:09:59,663 ‫Ah, esattamente. 193 00:10:00,890 --> 00:10:02,690 ‫Quindi 500 per 500 194 00:10:02,690 --> 00:10:07,200 ‫e ora che è completamente sfocato perché l'immagine originale era molto più piccola. 195 00:10:07,200 --> 00:10:10,440 ‫Ma non importa, non importa affatto. 196 00:10:10,440 --> 00:10:12,643 ‫Ciò che conta è che 197 00:10:13,910 --> 00:10:17,570 ‫ora possiamo effettivamente caricare le foto direttamente da questo modulo. 198 00:10:17,570 --> 00:10:19,830 ‫Voglio che sia tutto per dare 199 00:10:19,830 --> 00:10:22,480 ‫un'occhiata alla nostra console qui a quei 200 00:10:22,480 --> 00:10:27,480 ‫dati del modulo che pensavo avessimo registrato e che non sono apparsi qui perché 201 00:10:27,546 --> 00:10:29,530 ‫abbiamo già ricaricato la pagina. 202 00:10:29,530 --> 00:10:32,184 ‫Ma comunque, volevo rimettere qui l'altra immagine. 203 00:10:32,184 --> 00:10:36,543 ‫Quindi quello che abbiamo effettivamente caricato prima che è 204 00:10:39,290 --> 00:10:41,820 ‫in dev-data, image e aarav. 205 00:10:41,820 --> 00:10:46,820 ‫Va bene, i dati sono stati aggiornati con successo. 206 00:10:50,040 --> 00:10:53,340 ‫Diamo subito un'occhiata ai dati del nostro telefono qui. 207 00:10:53,340 --> 00:10:56,760 ‫Ah, ma immagino che non possiamo davvero vedere cosa abbiamo qui. 208 00:10:56,760 --> 00:11:00,173 ‫Vediamo. 209 00:11:01,100 --> 00:11:02,223 ‫Nah, non possiamo davvero vedere quello che abbiamo. 210 00:11:04,045 --> 00:11:06,689 ‫Ok, quindi non ho mai dato un'occhiata a questo. 211 00:11:06,689 --> 00:11:09,160 ‫E ho pensato che forse avremmo potuto vedere le informazioni, 212 00:11:09,160 --> 00:11:10,110 ‫ma non importa. 213 00:11:10,110 --> 00:11:12,850 ‫L'importante è che abbia funzionato davvero. 214 00:11:12,850 --> 00:11:16,170 ‫Quindi, se ricarichiamo ora, ovviamente questa vecchia immagine 215 00:11:16,170 --> 00:11:18,191 ‫è tornata di nuovo. 216 00:11:18,191 --> 00:11:21,940 ‫Fantastico, quindi ancora una volta, questa applicazione sta davvero iniziando 217 00:11:21,940 --> 00:11:25,000 ‫a sembrare sempre più un vero lavoro.