﻿1
00:00:01,090 --> 00:00:04,280
‫Jonas: Ora configuriamo effettivamente Multer in base alle nostre esigenze.

2
00:00:04,280 --> 00:00:07,380
‫In primo luogo, assegnando alle immagini un nome file migliore,

3
00:00:07,380 --> 00:00:09,990
‫in secondo luogo consentendo solo il caricamento dei

4
00:00:09,990 --> 00:00:12,193
‫file immagine sul nostro server.

5
00:00:13,880 --> 00:00:15,640
‫E per iniziare, spostiamo effettivamente

6
00:00:15,640 --> 00:00:17,210
‫tutte le cose relative

7
00:00:17,210 --> 00:00:19,563
‫a Multer da questo router al controller.

8
00:00:21,910 --> 00:00:23,633
‫Quindi tagliamo questo

9
00:00:24,600 --> 00:00:27,220
‫qui, e lo metterò proprio qui alla

10
00:00:27,220 --> 00:00:30,570
‫fine, o in realtà in cima, va bene?

11
00:00:30,570 --> 00:00:32,710
‫Quindi tutto ciò che riguarda

12
00:00:32,710 --> 00:00:35,263
‫Multer, lo metteremo proprio qui in alto.

13
00:00:36,400 --> 00:00:41,400
‫Quindi, ovviamente, abbiamo anche bisogno di importare questo pacchetto Multer.

14
00:00:44,940 --> 00:00:48,503
‫E ora abbiamo anche bisogno di creare un middleware con questo.

15
00:00:53,970 --> 00:00:56,393
‫Quindi esportazioni. uploadUserPhoto sarà

16
00:01:01,540 --> 00:01:03,253
‫uguale a questo.

17
00:01:05,176 --> 00:01:07,890
‫Va bene, quindi abbiamo ancora una funzione

18
00:01:07,890 --> 00:01:12,890
‫middleware, ma ora ha il suo nome più facile da usare, va bene?

19
00:01:13,950 --> 00:01:16,880
‫E così qui, userController. carica foto, va bene?

20
00:01:20,460 --> 00:01:22,200
‫Quindi sembra molto più carino,

21
00:01:22,200 --> 00:01:23,610
‫e ovviamente ha

22
00:01:23,610 --> 00:01:25,950
‫senso che questo codice sia nel controller.

23
00:01:25,950 --> 00:01:28,010
‫E così ora questo è

24
00:01:28,010 --> 00:01:30,790
‫bello e pulito, e possiamo davvero chiuderlo ora.

25
00:01:30,790 --> 00:01:33,260
‫Ottimo, quindi ora andiamo avanti e configuriamo

26
00:01:33,260 --> 00:01:36,400
‫il nostro caricamento Multer in base alle nostre esigenze.

27
00:01:36,400 --> 00:01:39,640
‫E quindi per questo creeremo uno storage Multer

28
00:01:39,640 --> 00:01:41,950
‫e un filtro Multer, ok?

29
00:01:41,950 --> 00:01:45,260
‫E poi useremo quella memoria e il

30
00:01:45,260 --> 00:01:49,513
‫filtro per creare il caricamento da lì, va bene?

31
00:01:50,400 --> 00:01:51,603
‫Quindi facciamolo qui.

32
00:01:56,320 --> 00:02:01,053
‫Quindi un multerStorage, usiamo multer. diskStorage.

33
00:02:03,880 --> 00:02:05,760
‫Va bene, e potremmo anche

34
00:02:05,760 --> 00:02:08,560
‫scegliere di archiviare il file in memoria come buffer,

35
00:02:08,560 --> 00:02:11,670
‫in modo da poterlo utilizzare in seguito da altri processi.

36
00:02:11,670 --> 00:02:14,050
‫E in realtà lo faremo un

37
00:02:14,050 --> 00:02:16,700
‫po' più tardi, ma per ora ovviamente vogliamo

38
00:02:16,700 --> 00:02:20,120
‫memorizzare il file così com'è nel nostro file system, ok?

39
00:02:20,120 --> 00:02:23,690
‫Quindi per l'archiviazione su disco prenderemo un paio di opzioni e

40
00:02:23,690 --> 00:02:25,693
‫la prima è la destinazione.

41
00:02:27,900 --> 00:02:31,390
‫Ma ora non possiamo semplicemente impostarlo su questo percorso come

42
00:02:31,390 --> 00:02:32,850
‫abbiamo fatto prima.

43
00:02:32,850 --> 00:02:35,760
‫No, questo è un po' più complesso, va bene?

44
00:02:35,760 --> 00:02:39,550
‫E quindi davvero questa destinazione qui è una funzione di

45
00:02:39,550 --> 00:02:41,400
‫callback che funziona così.

46
00:02:41,400 --> 00:02:45,610
‫Quindi questa funzione di callback ha accesso alla richiesta corrente, al

47
00:02:45,610 --> 00:02:47,750
‫file attualmente caricato e anche a

48
00:02:47,750 --> 00:02:49,820
‫una funzione di callback.

49
00:02:49,820 --> 00:02:51,330
‫E questa funzione di callback

50
00:02:51,330 --> 00:02:53,720
‫è un po' come la prossima funzione in Express.

51
00:02:53,720 --> 00:02:56,810
‫Ma qui lo chiamo cb, che sta per callback,

52
00:02:56,810 --> 00:02:58,790
‫quindi è un nome diverso

53
00:02:58,790 --> 00:03:02,000
‫da next, perché in realtà non viene da Express, ok?

54
00:03:02,000 --> 00:03:05,070
‫Ma è simile in quanto possiamo passare errori qui e

55
00:03:05,070 --> 00:03:07,683
‫altre cose, come vedrai tra un secondo.

56
00:03:10,830 --> 00:03:12,730
‫Quindi, per definire ora

57
00:03:12,730 --> 00:03:15,640
‫la destinazione, dobbiamo effettivamente chiamare quel callback.

58
00:03:15,640 --> 00:03:18,730
‫Quindi callback, e quindi il primo argomento è un errore se

59
00:03:18,730 --> 00:03:19,820
‫ce n'è uno.

60
00:03:19,820 --> 00:03:21,523
‫E se no, allora solo null.

61
00:03:22,910 --> 00:03:25,943
‫E il secondo argomento è quindi la destinazione effettiva.

62
00:03:26,810 --> 00:03:28,260
‫Quindi copiamolo

63
00:03:29,180 --> 00:03:31,333
‫da qui e incolliamo qui.

64
00:03:32,500 --> 00:03:37,500
‫Va bene, e di nuovo tutto questo sembra un po' strano e complesso,

65
00:03:37,820 --> 00:03:39,130
‫e diamo un'occhiata

66
00:03:39,130 --> 00:03:41,433
‫alla documentazione di Multer su GitHub.

67
00:03:48,860 --> 00:03:50,970
‫Ok, quindi se hai bisogno

68
00:03:50,970 --> 00:03:54,570
‫di saperne di più, puoi dare un'occhiata a questa documentazione qui.

69
00:03:54,570 --> 00:03:56,890
‫E come vedi, con

70
00:03:56,890 --> 00:04:01,890
‫6.000 stelle, è in realtà un pacchetto piuttosto popolare.

71
00:04:02,090 --> 00:04:04,293
‫Quindi qui puoi imparare come usarlo.

72
00:04:05,270 --> 00:04:07,090
‫Ma in effetti quello che troverai

73
00:04:07,090 --> 00:04:08,700
‫qui è un po'

74
00:04:08,700 --> 00:04:11,283
‫quello che faremo nelle prossime due lezioni, ok?

75
00:04:12,290 --> 00:04:15,000
‫Quindi questo sembra molto più confuso di

76
00:04:15,000 --> 00:04:17,350
‫quello che faremo, va bene?

77
00:04:17,350 --> 00:04:18,750
‫Ma vedi che

78
00:04:18,750 --> 00:04:22,820
‫questo è in realtà ciò che stiamo facendo attualmente, quindi stiamo impostando

79
00:04:22,820 --> 00:04:26,580
‫la destinazione e successivamente imposteremo anche il nome del file.

80
00:04:26,580 --> 00:04:30,250
‫Quindi facciamolo, e di nuovo, se vuoi saperne di

81
00:04:30,250 --> 00:04:33,400
‫più, dai un'occhiata a quella documentazione.

82
00:04:33,400 --> 00:04:37,840
‫Ma per ora voglio impostare la proprietà del nome del file.

83
00:04:37,840 --> 00:04:41,593
‫Quindi non quello, semplicemente nome file.

84
00:04:42,610 --> 00:04:45,980
‫E ancora, questa è una funzione di

85
00:04:45,980 --> 00:04:50,973
‫callback molto simile con una firma, richiesta, file e callback simili.

86
00:04:54,540 --> 00:04:57,980
‫E ora vogliamo dare ai nostri file dei nomi di file univoci.

87
00:04:57,980 --> 00:04:59,380
‫E il

88
00:04:59,380 --> 00:05:04,380
‫modo in cui lo farò è chiamarli user-userid, il timestamp corrente.

89
00:05:04,990 --> 00:05:07,720
‫Quindi qualcosa del genere: so user-,

90
00:05:07,720 --> 00:05:11,793
‫e poi l'ID che è strano, qualcosa del genere.

91
00:05:14,190 --> 00:05:16,640
‫Giusto, e poi il timestamp

92
00:05:16,640 --> 00:05:19,880
‫attuale, che sarà un numero enorme, qualcosa

93
00:05:19,880 --> 00:05:23,490
‫del genere, e poi ovviamente l'estensione del file, ok?

94
00:05:23,490 --> 00:05:25,730
‫E con questo possiamo sostanzialmente garantire

95
00:05:25,730 --> 00:05:29,030
‫che non ci saranno due immagini con lo stesso nome file.

96
00:05:29,030 --> 00:05:31,290
‫Se usassimo solo l'ID

97
00:05:31,290 --> 00:05:33,820
‫utente, ovviamente più caricamenti da parte

98
00:05:33,820 --> 00:05:36,140
‫dello stesso utente sovrascriverebbero l'immagine precedente.

99
00:05:36,140 --> 00:05:39,770
‫E se usassimo solo l'utente con il timestamp, beh,

100
00:05:39,770 --> 00:05:43,210
‫se due utenti caricassero un'immagine contemporaneamente, otterrebbero lo

101
00:05:43,210 --> 00:05:45,920
‫stesso identico nome file, il che

102
00:05:45,920 --> 00:05:47,393
‫non ha senso.

103
00:05:48,630 --> 00:05:51,300
‫Bene, quindi prima di tutto,

104
00:05:51,300 --> 00:05:55,330
‫estraiamo effettivamente il nome del file dal file caricato.

105
00:05:55,330 --> 00:05:57,060
‫E come lo otteniamo?

106
00:05:57,060 --> 00:05:59,963
‫Bene, diamo un'occhiata all'output della nostra console qui, dove

107
00:06:03,080 --> 00:06:06,120
‫abbiamo avuto la richiesta. file molto tempo fa.

108
00:06:06,120 --> 00:06:09,080
‫Quindi eccolo qui, quindi ricorda che questo oggetto qui

109
00:06:09,080 --> 00:06:11,830
‫era una richiesta. file, e quindi

110
00:06:11,830 --> 00:06:15,530
‫questo è esattamente quello che è questo file qui, ok?

111
00:06:15,530 --> 00:06:18,260
‫E quindi qui abbiamo il tipo

112
00:06:18,260 --> 00:06:22,087
‫MIME, e quindi il JPEG è memorizzato proprio qui, ok?

113
00:06:22,087 --> 00:06:24,030
‫E quindi è qui che otterremo

114
00:06:24,030 --> 00:06:25,363
‫l'estensione del file.

115
00:06:28,130 --> 00:06:33,130
‫Quindi l'estensione è uguale al file. mimetype, quindi dividiamo

116
00:06:35,290 --> 00:06:39,550
‫quella stringa con la barra e prendiamo

117
00:06:39,550 --> 00:06:42,720
‫il secondo elemento dell'array risultante.

118
00:06:42,720 --> 00:06:46,853
‫E quindi quella sarà solo questa parte, quindi solo questa.

119
00:06:47,780 --> 00:06:50,500
‫Va bene, quindi questa è l'estensione.

120
00:06:50,500 --> 00:06:52,100
‫E quindi ora,

121
00:06:52,100 --> 00:06:56,760
‫proprio come prima, dobbiamo chiamare la funzione di callback senza errori e quindi

122
00:06:56,760 --> 00:06:59,423
‫il nome del file che vogliamo specificare.

123
00:07:00,460 --> 00:07:05,460
‫Quindi, quello sarà l'utente, quindi l'ID utente, ricordi?

124
00:07:06,890 --> 00:07:09,970
‫E quindi dal momento che abbiamo accesso alla richiesta qui,

125
00:07:09,970 --> 00:07:13,913
‫è molto semplice, richiesta. utente. ID.

126
00:07:14,830 --> 00:07:16,620
‫E quindi, come sai,

127
00:07:16,620 --> 00:07:19,040
‫questo è l'ID dell'utente attualmente connesso.

128
00:07:19,040 --> 00:07:24,040
‫Quindi il timestamp, quindi Data. ora, ok, e

129
00:07:25,547 --> 00:07:30,547
‫poi punta l'estensione che abbiamo appena creato, ok?

130
00:07:33,120 --> 00:07:35,410
‫Quindi liberiamoci di questo commento, e quindi

131
00:07:35,410 --> 00:07:37,780
‫questo è in realtà il nostro spazio di archiviazione.

132
00:07:37,780 --> 00:07:40,310
‫E quindi sostanzialmente una definizione completa di come

133
00:07:40,310 --> 00:07:42,540
‫vogliamo archiviare i nostri file, con

134
00:07:42,540 --> 00:07:44,963
‫la destinazione e il nome del file.

135
00:07:46,270 --> 00:07:48,833
‫Successivamente, creiamo un filtro Multer.

136
00:07:52,270 --> 00:07:53,983
‫Quindi chiamiamolo esattamente così.

137
00:07:57,200 --> 00:08:00,370
‫E il filtro in Multer è semplicemente, ancora

138
00:08:00,370 --> 00:08:04,010
‫una volta, una funzione di callback, simile a quelle che avevamo

139
00:08:04,010 --> 00:08:08,433
‫prima, che accede alla richiesta, al file e a una funzione di callback.

140
00:08:09,850 --> 00:08:11,730
‫E in questa funzione, l'obiettivo

141
00:08:11,730 --> 00:08:14,660
‫è fondamentalmente verificare se il file caricato è un'immagine.

142
00:08:14,660 --> 00:08:17,220
‫E se è così, allora passiamo true alla

143
00:08:17,220 --> 00:08:19,010
‫funzione di callback, e se

144
00:08:19,010 --> 00:08:22,110
‫non lo è, passiamo false alla funzione di callback, insieme

145
00:08:22,110 --> 00:08:23,410
‫a un errore.

146
00:08:23,410 --> 00:08:25,810
‫Perché, ancora una volta, non vogliamo consentire il

147
00:08:25,810 --> 00:08:28,020
‫caricamento di file che non siano immagini.

148
00:08:28,020 --> 00:08:31,370
‫Ed è proprio a questo che serve questo filtro.

149
00:08:31,370 --> 00:08:33,090
‫Ora, se nella

150
00:08:33,090 --> 00:08:36,830
‫tua applicazione vuoi caricare qualcos'altro, diciamo file CSV, quando

151
00:08:36,830 --> 00:08:40,260
‫poi ovviamente puoi testare quello invece delle immagini.

152
00:08:40,260 --> 00:08:42,240
‫Quindi tutte le cose che stiamo facendo

153
00:08:42,240 --> 00:08:43,960
‫qui funzionano non solo per

154
00:08:43,960 --> 00:08:45,790
‫le immagini, ma davvero per tutti i

155
00:08:45,790 --> 00:08:48,090
‫tipi di file che vuoi caricare, va bene?

156
00:08:48,090 --> 00:08:51,610
‫Ora di nuovo, in questo caso stiamo davvero parlando di immagini,

157
00:08:51,610 --> 00:08:54,640
‫quindi testiamo se il file caricato è un'immagine.

158
00:08:54,640 --> 00:08:58,410
‫E per questo useremo ancora una volta il tipo MIME,

159
00:08:58,410 --> 00:09:00,770
‫perché qualunque sia il tipo

160
00:09:00,770 --> 00:09:05,300
‫di immagine caricato, quindi non importa se è un JPEG, o un PNG,

161
00:09:05,300 --> 00:09:07,730
‫o una bitmap, o un TIFF, o

162
00:09:07,730 --> 00:09:10,950
‫qualsiasi cosa, il tipo MIME inizierà sempre con image.

163
00:09:10,950 --> 00:09:13,170
‫E così ora possiamo testarlo.

164
00:09:13,170 --> 00:09:17,643
‫Quindi se file . tipo mimetico. startWith, image e

165
00:09:21,890 --> 00:09:25,910
‫quindi non sono sicuro che l'abbiamo usato prima, ma è

166
00:09:25,910 --> 00:09:29,700
‫un metodo stringa abbastanza nuovo e molto utile disponibile

167
00:09:29,700 --> 00:09:31,750
‫in JavaScript, quindi in tutti

168
00:09:31,750 --> 00:09:33,593
‫i JavaScript in generale.

169
00:09:34,770 --> 00:09:38,650
‫Quindi, nel caso in cui abbiamo effettivamente un'immagine, beh, allora

170
00:09:38,650 --> 00:09:42,090
‫di nuovo non c'è errore e passiamo al vero,

171
00:09:42,090 --> 00:09:43,810
‫come ho detto all'inizio.

172
00:09:43,810 --> 00:09:48,810
‫Ma in caso contrario, passeremo effettivamente un errore e

173
00:09:50,520 --> 00:09:52,080
‫quindi falso.

174
00:09:52,080 --> 00:09:55,320
‫Quindi mettiamo solo una x qui e false.

175
00:09:55,320 --> 00:09:58,910
‫Quindi per questa x qui, ora creeremo un AppError,

176
00:09:58,910 --> 00:10:01,010
‫proprio come abbiamo sempre fatto.

177
00:10:01,010 --> 00:10:03,423
‫E in realtà lo abbiamo già qui.

178
00:10:04,470 --> 00:10:07,643
‫Quindi diciamo un

179
00:10:10,522 --> 00:10:14,896
‫nuovo AppError, non un'immagine, per

180
00:10:14,896 --> 00:10:19,896
‫favore carica solo immagini, va bene?

181
00:10:20,709 --> 00:10:23,459
‫E poi un 400 per una brutta richiesta.

182
00:10:24,876 --> 00:10:28,875
‫Ottimo, quindi abbiamo il nostro spazio di archiviazione, abbiamo il nostro

183
00:10:28,875 --> 00:10:30,567
‫filtro, ora è il

184
00:10:30,567 --> 00:10:33,294
‫momento di usarli effettivamente per creare il caricamento.

185
00:10:33,294 --> 00:10:37,228
‫Va bene, quindi il caricamento ora non sarà simile

186
00:10:37,228 --> 00:10:40,816
‫a questo, ma passeremo invece queste variabili.

187
00:10:40,816 --> 00:10:44,149
‫Quindi in Multer possiamo specificare lo storage, e

188
00:10:46,618 --> 00:10:49,368
‫questo è il nostro multerStorage.

189
00:10:52,118 --> 00:10:54,118
‫E poi il

190
00:10:57,109 --> 00:11:01,276
‫fileFilter, che è la variabile che abbiamo chiamato multerFilter.

191
00:11:02,439 --> 00:11:04,299
‫Ok, e basta.

192
00:11:04,299 --> 00:11:06,486
‫E ovviamente avremmo potuto mettere

193
00:11:06,486 --> 00:11:10,225
‫tutto questo qui direttamente in questo oggetto opzioni qui.

194
00:11:10,225 --> 00:11:12,901
‫Ma di solito preferisco farlo all'esterno

195
00:11:12,901 --> 00:11:17,076
‫e poi passare semplicemente le variabili in un oggetto options.

196
00:11:17,076 --> 00:11:19,351
‫Quindi sembra un po' più pulito.

197
00:11:19,351 --> 00:11:22,241
‫Quindi questi sono molti passaggi che

198
00:11:22,241 --> 00:11:26,046
‫dobbiamo compiere per creare davvero il nostro middleware Multer.

199
00:11:26,046 --> 00:11:27,953
‫Ma alla fine poi ovviamente,

200
00:11:27,953 --> 00:11:29,770
‫proprio come abbiamo fatto

201
00:11:29,770 --> 00:11:33,169
‫nell'ultimo video, usiamo questo upload, e su quello chiamiamo

202
00:11:33,169 --> 00:11:35,437
‫single, con il nome del campo.

203
00:11:35,437 --> 00:11:38,688
‫Quindi foto, e poi da lì creiamo un'esportazione, o

204
00:11:38,688 --> 00:11:41,262
‫middleware, che in realtà abbiamo già incluso

205
00:11:41,262 --> 00:11:42,880
‫nel nostro router.

206
00:11:42,880 --> 00:11:46,845
‫Quindi ora eliminiamo questo vecchio tipo di immagine

207
00:11:46,845 --> 00:11:48,845
‫che avevamo qui prima.

208
00:11:50,649 --> 00:11:52,399
‫No, non ha funzionato.

209
00:11:54,543 --> 00:11:57,569
‫E ora testiamolo di nuovo qui.

210
00:11:57,569 --> 00:12:00,637
‫Quindi, a Postman, abbiamo ancora il nostro nome

211
00:12:00,637 --> 00:12:03,554
‫e l'immagine del Leone, quindi andiamo.

212
00:12:05,556 --> 00:12:08,473
‫E non abbiamo avuto errori, il che è positivo.

213
00:12:10,516 --> 00:12:13,516
‫E vediamo di nuovo il nostro output qui.

214
00:12:16,428 --> 00:12:19,240
‫Quindi tutto qui all'inizio è lo stesso,

215
00:12:19,240 --> 00:12:23,827
‫ma poi vedi che il nostro nome file ora è effettivamente corretto.

216
00:12:23,827 --> 00:12:26,465
‫E se dai un'occhiata qui alla nostra cartella,

217
00:12:26,465 --> 00:12:28,948
‫allora in effetti c'è la nostra immagine.

218
00:12:28,948 --> 00:12:31,934
‫E quindi è esattamente quello che abbiamo caricato.

219
00:12:31,934 --> 00:12:34,934
‫Quindi è nei dati di sviluppo, nelle immagini, Leo.

220
00:12:37,649 --> 00:12:41,288
‫E infatti, è esattamente lo stesso.

221
00:12:41,288 --> 00:12:43,724
‫Fantastico, è fantastico.

222
00:12:43,724 --> 00:12:46,615
‫Ora solo per testare questo filtro

223
00:12:46,615 --> 00:12:51,615
‫anche qui, proviamo a caricare qualche altro file che non sia un'immagine.

224
00:12:51,974 --> 00:12:56,516
‫Quindi selezioniamo qualcos'altro qui dai nostri dati di sviluppo

225
00:12:56,516 --> 00:13:00,278
‫e diciamo semplicemente alcuni dati JSON.

226
00:13:00,278 --> 00:13:04,336
‫E quindi aspettiamo se riceviamo un errore qui.

227
00:13:04,336 --> 00:13:06,190
‫E infatti ne otteniamo uno.

228
00:13:06,190 --> 00:13:09,070
‫Quindi non un'immagine, carica solo immagini.

229
00:13:09,070 --> 00:13:11,643
‫E quindi significa che funziona anche quello.

230
00:13:12,610 --> 00:13:16,200
‫Così perfetto, tutta la nostra configurazione Multer ora

231
00:13:16,200 --> 00:13:18,540
‫funziona davvero bene, ma ovviamente

232
00:13:18,540 --> 00:13:20,480
‫manca ancora un passaggio.

233
00:13:20,480 --> 00:13:22,660
‫E questo è effettivamente

234
00:13:22,660 --> 00:13:25,550
‫collegare l'utente all'immagine appena aggiornata, giusto?

235
00:13:25,550 --> 00:13:27,660
‫Perché in questo momento nel database,

236
00:13:27,660 --> 00:13:29,420
‫ovviamente, abbiamo ancora il

237
00:13:29,420 --> 00:13:31,840
‫percorso, o in realtà il nome della

238
00:13:31,840 --> 00:13:34,460
‫vecchia immagine, perché da nessuna parte nel nostro

239
00:13:34,460 --> 00:13:38,180
‫codice abbiamo specificato che volevamo aggiornare il documento dell'utente stesso, giusto?

240
00:13:38,180 --> 00:13:40,603
‫E quindi risolviamolo nel prossimo video.

