1
00:00:03,680 --> 00:00:05,985
Nella lezione precedente,

2
00:00:05,985 --> 00:00:08,880
abbiamo appreso come i caricamenti di file sono

3
00:00:08,880 --> 00:00:12,445
supportati attraverso l'approccio dati multi-piattaforma.

4
00:00:12,445 --> 00:00:16,320
In questo esercizio, faremo uso del modulo Multer,

5
00:00:16,320 --> 00:00:21,885
cui abbiamo fatto riferimento nella lezione per consentire al nostro server espresso di

6
00:00:21,885 --> 00:00:27,820
supportare il caricamento di file immagine nel nostro sito server.

7
00:00:27,820 --> 00:00:33,920
Essi memorizzeranno questi file di immagini nella cartella pubblica/images.

8
00:00:33,920 --> 00:00:40,370
Queste immagini sarebbero utili all'interno della nostra applicazione quando forniamo

9
00:00:40,370 --> 00:00:46,690
immagini per i vari piatti o i radar o le promozioni,

10
00:00:46,690 --> 00:00:51,490
che abbiamo costruito nel nostro server API REST.

11
00:00:51,490 --> 00:00:54,495
Per iniziare con questo esercizio,

12
00:00:54,495 --> 00:00:55,770
il primo passo, ovviamente,

13
00:00:55,770 --> 00:01:01,445
è installare il modulo Multer in modo che al prompt digiti npm installa

14
00:01:01,445 --> 00:01:10,145
multer meno save e al momento sto usando multer 1.3.1 in questo corso.

15
00:01:10,145 --> 00:01:12,785
Quindi, una volta installato il modulo multer,

16
00:01:12,785 --> 00:01:21,695
andiamo al nostro progetto e poi implementiamo un nuovo percorso che ci permette di caricare i file.

17
00:01:21,695 --> 00:01:25,920
Vai nel progetto nella cartella route,

18
00:01:25,920 --> 00:01:33,210
aggiungiamo un nuovo file denominato upload router.js.

19
00:01:33,210 --> 00:01:37,260
Questo router, router express che stiamo per implementare qui,

20
00:01:37,260 --> 00:01:43,380
è quello che sta per supportare il caricamento dei file.

21
00:01:43,380 --> 00:01:46,250
Quindi, nel router di caricamento lasciami andare

22
00:01:46,250 --> 00:01:50,120
al router piatto e copiare queste prime cose dal router piatto

23
00:01:50,120 --> 00:01:52,550
perché abbiamo praticamente intenzione di impostare una

24
00:01:52,550 --> 00:01:57,440
struttura simile nella nostra applicazione o il router di caricamento.

25
00:01:57,440 --> 00:02:00,720
Quindi, lasciami copiare quella parte e poi lo modificheremo.

26
00:02:00,720 --> 00:02:02,800
Quindi, nel router di caricamento,

27
00:02:02,800 --> 00:02:09,850
non ho bisogno di mangusta, quindi ho intenzione di rimuovere mangusta e non ho bisogno nemmeno dei piatti.

28
00:02:09,850 --> 00:02:12,755
Quindi, quei due sarebbero stati rimossi e dopo di che

29
00:02:12,755 --> 00:02:15,935
abbiamo bisogno di esprimere il parser del corpo e autenticare.

30
00:02:15,935 --> 00:02:25,585
Ora, ho intenzione di richiedere il modulo multer qui.

31
00:02:25,585 --> 00:02:29,280
Una volta che includiamo il modulo multer,

32
00:02:29,280 --> 00:02:35,585
ora questo router ho intenzione di chiamare questo come router di caricamento.

33
00:02:35,585 --> 00:02:42,020
Quindi, dirà upload router usa body parser e

34
00:02:42,020 --> 00:02:48,040
poi questo tranne il router di caricamento e di nuovo,

35
00:02:48,040 --> 00:02:58,110
ricordati di dire esportazioni di moduli, carica router qui.

36
00:02:58,110 --> 00:03:00,570
Quindi, per il percorso dei router di caricamento,

37
00:03:00,570 --> 00:03:03,025
abbiamo bisogno di aggiungere i vari metodi.

38
00:03:03,025 --> 00:03:07,130
Lo farò un po 'più tardi, ma prima di questo impostiamo

39
00:03:07,130 --> 00:03:11,765
multer per consentirci di caricare i file.

40
00:03:11,765 --> 00:03:19,545
Ora, per impostazione predefinita, multer può essere configurato semplicemente usando multer all'interno della nostra applicazione,

41
00:03:19,545 --> 00:03:24,360
ma ho intenzione di fare qualche configurazione di multer in

42
00:03:24,360 --> 00:03:28,100
questo esercizio in modo che abbiamo

43
00:03:28,100 --> 00:03:32,615
intenzione di personalizzare il modo in cui multer gestisce il caricamento dei file.

44
00:03:32,615 --> 00:03:35,150
Quindi, per usare il multer,

45
00:03:35,150 --> 00:03:43,455
una delle opzioni che Multer prende è per lo storage.

46
00:03:43,455 --> 00:03:49,295
Quindi, multer fornisce questa funzione di archiviazione su disco che

47
00:03:49,295 --> 00:03:56,480
ci permette di definire il motore di archiviazione e qui possiamo configurare alcune cose.

48
00:03:56,480 --> 00:04:00,409
Ora, se si tratta solo di configurare la destinazione,

49
00:04:00,409 --> 00:04:03,830
si può semplicemente dire i due punti principali

50
00:04:03,830 --> 00:04:08,810
e quindi specificare la cartella di destinazione all'interno della quale verranno memorizzati i file caricati.

51
00:04:08,810 --> 00:04:15,450
Ma qui ho intenzione di fare qualche ulteriore configurazione per il modulo multer qui.

52
00:04:15,450 --> 00:04:19,715
Quindi, questo è dove ho intenzione di utilizzare il supporto di archiviazione su disco multer.

53
00:04:19,715 --> 00:04:22,025
All' interno dello storage su disco,

54
00:04:22,025 --> 00:04:27,080
posso definire un paio di opzioni qui.

55
00:04:27,080 --> 00:04:32,315
Le opzioni che definirò saranno di

56
00:04:32,315 --> 00:04:40,535
destinazione e la seconda è il nome del file.

57
00:04:40,535 --> 00:04:45,725
Quindi, due configurazioni che ho intenzione di fornire allo storage su disco.

58
00:04:45,725 --> 00:04:48,860
La destinazione come ci si aspetterebbe,

59
00:04:48,860 --> 00:04:56,405
mi permette di configurare la destinazione e questo prende

60
00:04:56,405 --> 00:05:03,450
come configurazione qui una funzione.

61
00:05:03,450 --> 00:05:06,980
Quindi, la destinazione è configurata come una funzione qui.

62
00:05:06,980 --> 00:05:14,060
Questa funzione riceverà richiesta e anche un oggetto chiamato il file,

63
00:05:14,060 --> 00:05:16,790
che contiene informazioni sul file che è

64
00:05:16,790 --> 00:05:21,930
stato elaborato da multer e anche una funzione di callback.

65
00:05:21,930 --> 00:05:24,045
Quindi, cb è la funzione di callback.

66
00:05:24,045 --> 00:05:27,915
Quindi, qui per la destinazione,

67
00:05:27,915 --> 00:05:32,865
sto per dire cb null,

68
00:05:32,865 --> 00:05:37,054
il secondo parametro è la cartella di destinazione,

69
00:05:37,054 --> 00:05:41,330
che può essere espressa come una stringa in cui verranno memorizzati i file.

70
00:05:41,330 --> 00:05:51,025
Quindi, qui dentro, forniro' la destinazione come immagini di barra pubblica.

71
00:05:51,025 --> 00:05:54,980
Perché in questo esercizio ho intenzione di supportare i caricamenti di immagini.

72
00:05:54,980 --> 00:05:59,865
Quindi, questa è la parte che ho intenzione di specificare qui, quindi caricare l'immagine.

73
00:05:59,865 --> 00:06:03,800
Quindi, la funzione di callback come vedi richiede due parametri.

74
00:06:03,800 --> 00:06:04,820
Il primo è, ovviamente,

75
00:06:04,820 --> 00:06:07,460
l'errore che in questo caso lo imposterò su

76
00:06:07,460 --> 00:06:11,335
null e il secondo è la cartella di destinazione,

77
00:06:11,335 --> 00:06:14,110
in cui verranno memorizzate le mie immagini.

78
00:06:14,110 --> 00:06:19,010
Quindi, posso configurarlo dicendo immagini di barra pubblica.

79
00:06:19,010 --> 00:06:20,995
Quindi, nella cartella delle immagini,

80
00:06:20,995 --> 00:06:24,300
i file che carico verranno memorizzati.

81
00:06:24,300 --> 00:06:26,370
Anche per il nome del file,

82
00:06:26,370 --> 00:06:31,320
ottiene i tre parametri, il

83
00:06:31,320 --> 00:06:35,985
messaggio di richiesta, il file e la funzione di callback.

84
00:06:35,985 --> 00:06:39,345
Dalla configurazione del modo in cui viene chiamata la funzione di callback,

85
00:06:39,345 --> 00:06:42,140
possiamo specificare le informazioni sul nome del file.

86
00:06:42,140 --> 00:06:47,205
Quindi, per la funzione di callback direi cb null e non c'è errore qui.

87
00:06:47,205 --> 00:06:51,860
Quindi il secondo insiste sul nome del file,

88
00:06:51,860 --> 00:06:56,430
che verrà utilizzato per il file specifico che

89
00:06:56,430 --> 00:06:57,975
è stato appena caricato, come verrà memorizzato.

90
00:06:57,975 --> 00:07:01,835
Quindi, questo oggetto file che ho ottenuto qui,

91
00:07:01,835 --> 00:07:08,595
supporta un insieme di diverse proprietà su di esso.

92
00:07:08,595 --> 00:07:11,985
Una delle proprietà è chiamata, nome originale.

93
00:07:11,985 --> 00:07:14,585
Quindi, il nome originale essenzialmente,

94
00:07:14,585 --> 00:07:19,475
ci dà il nome originale del file dal lato client che è stato caricato.

95
00:07:19,475 --> 00:07:23,410
Insisto sul fatto che, quando il file viene salvato sul lato server,

96
00:07:23,410 --> 00:07:26,380
al file verrà assegnato esattamente lo

97
00:07:26,380 --> 00:07:29,710
stesso nome del nome originale del file che è stato caricato.

98
00:07:29,710 --> 00:07:32,605
In modo da poter sapere che sto caricando

99
00:07:32,605 --> 00:07:35,140
esattamente lo stesso file e sul lato server quando

100
00:07:35,140 --> 00:07:38,200
il file viene caricato verrà memorizzato con lo stesso nome.

101
00:07:38,200 --> 00:07:42,000
Ora, se non lo configuri,

102
00:07:42,000 --> 00:07:45,100
multer per impostazione predefinita darà una stringa casuale

103
00:07:45,100 --> 00:07:48,130
come nome del file senza estensioni.

104
00:07:48,130 --> 00:07:51,590
Quindi, che potrebbe non essere qualcosa che saresti felice

105
00:07:51,590 --> 00:07:55,290
di utilizzare in questo particolare esercizio.

106
00:07:55,290 --> 00:07:58,940
Quindi, ecco perché sto configurando esplicitamente dicendo che,

107
00:07:58,940 --> 00:08:04,805
il file dovrebbe essere memorizzato con il nome originale del file che è stato caricato.

108
00:08:04,805 --> 00:08:08,300
Ci sarà di nuovo incontrare questo oggetto file in

109
00:08:08,300 --> 00:08:11,630
un po 'più dettaglio e vedere come

110
00:08:11,630 --> 00:08:15,245
possiamo fare uso di informazioni dall'oggetto file un po 'più tardi.

111
00:08:15,245 --> 00:08:22,790
Inoltre, posso anche specificare un filtro file qui per la configurazione multers.

112
00:08:22,790 --> 00:08:28,145
Il filtro file mi permetterà di specificare quale tipo di file

113
00:08:28,145 --> 00:08:33,410
sono disposto a caricare o che sono disposto ad accettare per il caricamento.

114
00:08:33,410 --> 00:08:37,310
Quindi, per fare questo imposterò un'altra funzione chiamata

115
00:08:37,310 --> 00:08:42,480
filtro file immagine const

116
00:08:43,360 --> 00:08:48,755
e questa definirò la funzione in un minuto.

117
00:08:48,755 --> 00:08:51,530
Ora, per questo, posso anche salvare questo come

118
00:08:51,530 --> 00:08:55,580
const storage perché abbiamo usato const per tutto,

119
00:08:55,580 --> 00:08:57,650
quindi, dirò solo const storage.

120
00:08:57,650 --> 00:08:59,480
Per il filtro file immagine,

121
00:08:59,480 --> 00:09:01,490
dirò filtro file immagine const.

122
00:09:01,490 --> 00:09:07,725
Ancora una volta, riceve tre parametri richiesta,

123
00:09:07,725 --> 00:09:11,780
oggetto, l'oggetto file che contiene le informazioni

124
00:09:11,780 --> 00:09:15,660
sul file che è stato caricato e la funzione di callback qui.

125
00:09:15,660 --> 00:09:17,260
Attraverso la funzione di callback,

126
00:09:17,260 --> 00:09:22,535
passerò le informazioni alla mia configurazione multer che

127
00:09:22,535 --> 00:09:27,800
mi consente di specificare come memorizzerò queste informazioni.

128
00:09:27,800 --> 00:09:30,590
Quindi, questa sarà una funzione freccia qui.

129
00:09:30,590 --> 00:09:35,800
All' interno di questa funzione freccia ciò che controllerò è che,

130
00:09:35,800 --> 00:09:45,405
dirò se non il nome originale del file corrisponde.

131
00:09:45,405 --> 00:09:49,340
Quindi, il nome originale è una stringa qui.

132
00:09:49,340 --> 00:09:55,780
Quindi, sto cercando di vedere se c'è una corrispondenza per quella stringa dicendo,

133
00:09:55,780 --> 00:09:58,260
dentro qui un'espressione regolare.

134
00:09:58,260 --> 00:10:01,570
Quindi, l'espressione regolare lo specificherò come barra,

135
00:10:01,570 --> 00:10:05,505
backslash dot e poi,

136
00:10:05,505 --> 00:10:09,565
le opzioni che ho intenzione di specificare sono jpg

137
00:10:09,565 --> 00:10:15,530
o jpeg o

138
00:10:15,530 --> 00:10:22,260
png o gif.

139
00:10:25,250 --> 00:10:31,575
Quindi, è così che specifico l'espressione regolare lì.

140
00:10:31,575 --> 00:10:32,785
Per dire che va bene,

141
00:10:32,785 --> 00:10:38,515
se l'estensione del file contiene jpg o jpeg o png o gif,

142
00:10:38,515 --> 00:10:44,630
allora lo tratterò come un file immagine e sarò disposto ad accettare quei file.

143
00:10:44,630 --> 00:10:47,225
Quindi, questo è ciò che stiamo testando qui.

144
00:10:47,225 --> 00:10:49,690
Se questo è il caso,

145
00:10:49,690 --> 00:10:54,920
cioè se l'estensione del file non corrisponde a nessuna di queste cose, quindi,

146
00:10:54,920 --> 00:11:02,460
è per questo che stiamo vedendo non allora diremo, ritorno cb.

147
00:11:02,460 --> 00:11:07,890
Quindi, si noti che, il cb il primo parametro sarebbe un errore.

148
00:11:07,890 --> 00:11:12,150
Quindi, restituirò un nuovo errore

149
00:11:12,150 --> 00:11:18,375
che dice che puoi caricare solo file di immagine.

150
00:11:18,375 --> 00:11:23,195
Quindi, stiamo insistendo sul fatto che gli unici file che

151
00:11:23,195 --> 00:11:28,565
accetteranno sono i file di immagine e il secondo parametro sarebbe falso.

152
00:11:28,565 --> 00:11:32,240
Poiché stiamo fornendo l'errore come primo parametro,

153
00:11:32,240 --> 00:11:35,460
il secondo parametro è impostato su false.

154
00:11:36,620 --> 00:11:44,340
Il contrario sta dicendo cb null true.

155
00:11:44,340 --> 00:11:49,840
Quindi, il che significa che il file che sta cercando di essere

156
00:11:49,840 --> 00:11:55,440
caricato corrisponde al modello e quindi è un file immagine,

157
00:11:55,440 --> 00:11:57,955
e quindi siamo disposti a lasciarlo caricare.

158
00:11:57,955 --> 00:12:03,410
Due configurazioni che stiamo per fornire a quel modulo multer.

159
00:12:03,410 --> 00:12:07,475
Come configuriamo il modulo multer per l'utilizzo all'interno della nostra applicazione?

160
00:12:07,475 --> 00:12:12,489
Questo è dove dichiarerò il caricamento const

161
00:12:12,489 --> 00:12:19,300
come multer e quindi specificherò tra parentesi che le opzioni qui.

162
00:12:19,300 --> 00:12:27,790
Posso specificare lo storage come funzione di archiviazione che ho appena definito qui.

163
00:12:27,790 --> 00:12:31,645
Questa funzione di archiviazione come primo parametro

164
00:12:31,645 --> 00:12:35,625
e il secondo parametro è un filtro file.

165
00:12:35,625 --> 00:12:40,335
Un filtro file è un metodo che mi consente di specificare

166
00:12:40,335 --> 00:12:46,760
quale tipo di file sono disposto ad accettare e quindi dirò, filtro file immagine.

167
00:12:46,760 --> 00:12:48,890
Basta attivare la parola a capo,

168
00:12:48,890 --> 00:12:51,860
in modo da poter vedere l'intera riga qui.

169
00:12:51,860 --> 00:12:57,045
Quindi, dice che puoi caricare solo file di immagine e poi per il multer,

170
00:12:57,045 --> 00:13:01,750
sto configurando il filtro immagine, il gioco è fatto.

171
00:13:01,750 --> 00:13:10,435
Il mio modulo multer è ora configurato per consentirmi di caricare qui i file immagine.

172
00:13:10,435 --> 00:13:15,115
Quindi andiamo avanti e configurare il router di caricamento.

173
00:13:15,115 --> 00:13:16,670
Per il router di caricamento,

174
00:13:16,670 --> 00:13:20,325
consentirò solo il metodo post qui.

175
00:13:20,325 --> 00:13:21,910
Quindi i

176
00:13:21,910 --> 00:13:30,125
metodi get, put ed delete non saranno consentiti sull'endpoint del router di caricamento.

177
00:13:30,125 --> 00:13:32,130
Per aiutarmi a farlo,

178
00:13:32,130 --> 00:13:38,270
andrò al router piatto e poi ricorderò che avevamo già configurato il put qui.

179
00:13:38,270 --> 00:13:42,230
Ho intenzione di copiarlo e poi venire

180
00:13:42,230 --> 00:13:47,730
al router di caricamento e poi incollerò quelle informazioni qui.

181
00:13:47,730 --> 00:13:53,500
Diremo, se si tratta di un'operazione get, non ho intenzione di

182
00:13:53,500 --> 00:14:02,230
supportare che sull'endpoint sarebbe ImageUpload.

183
00:14:02,580 --> 00:14:05,545
Il get non sarà consentito,

184
00:14:05,545 --> 00:14:13,040
e allo stesso modo il put non sarà consentito,

185
00:14:13,710 --> 00:14:20,000
e anche l'eliminazione non sarà consentita.

186
00:14:20,640 --> 00:14:31,310
Non ho intenzione di supportare nessuna di queste operazioni, quindi metti, cancella.

187
00:14:31,310 --> 00:14:33,555
Questi tre non saranno ammessi.

188
00:14:33,555 --> 00:14:40,030
L' unico metodo che ho intenzione di supportare è il metodo post.

189
00:14:40,030 --> 00:14:41,920
Per il metodo post,

190
00:14:41,920 --> 00:14:47,950
faremo questa autenticazione fino a quel punto.

191
00:14:47,950 --> 00:14:50,560
Ho solo intenzione di copiare quello lì dentro,

192
00:14:50,560 --> 00:14:57,205
chiudere quell'endpoint e per il post.

193
00:14:57,205 --> 00:14:59,125
Quando viene pubblicato un file,

194
00:14:59,125 --> 00:15:03,035
come gestiamo questo post?

195
00:15:03,035 --> 00:15:06,320
Per gestire il post qui,

196
00:15:06,320 --> 00:15:09,885
non ho bisogno del prossimo per questo.

197
00:15:09,885 --> 00:15:15,485
Ora, oltre all'autenticazione VerifyUser e autenticare VerifyAdmin,

198
00:15:15,485 --> 00:15:21,280
sulla stessa riga configurerò il caricamento.

199
00:15:21,280 --> 00:15:27,270
Quindi, ricorda che avevo configurato il caricamento usando multer qui.

200
00:15:27,270 --> 00:15:29,790
Quindi, ho intenzione di fare uso del caricamento che

201
00:15:29,790 --> 00:15:34,200
supporta una funzione chiamata come upload.single.

202
00:15:34,200 --> 00:15:42,400
Questa singola funzione prende come parametro.

203
00:15:42,400 --> 00:15:49,630
Il nome del campo modulo che specifica quel file,

204
00:15:49,630 --> 00:15:52,300
si vedrà che in breve tempo.

205
00:15:52,300 --> 00:16:01,930
Questo campo modulo lo chiamerò come ImageFile qui.

206
00:16:01,930 --> 00:16:09,455
Carica singolo significa che mi permetterà di caricare solo un singolo file qui.

207
00:16:09,455 --> 00:16:15,065
Quel singolo file verrà specificato nel modulo di caricamento dal lato client

208
00:16:15,065 --> 00:16:21,730
nel caricamento del modulo multi-parte utilizzando tale nome lì.

209
00:16:21,860 --> 00:16:26,525
Quando il file viene ottenuto nel codice,

210
00:16:26,525 --> 00:16:28,060
se vengo fino a questo punto,

211
00:16:28,060 --> 00:16:32,290
questo caricamento si occuperà di gestire gli errori se ce ne sono,

212
00:16:32,290 --> 00:16:36,585
se il file non è caricato correttamente e così via.

213
00:16:36,585 --> 00:16:38,315
Quando si arriva a questo punto,

214
00:16:38,315 --> 00:16:40,630
il file sarebbe stato caricato correttamente e

215
00:16:40,630 --> 00:16:43,510
quindi è necessario gestire il file caricato.

216
00:16:43,510 --> 00:16:52,750
A questo punto, diremo res.statusCode è

217
00:16:52,750 --> 00:17:02,780
200 e quindi res.setHeader Content-Type,

218
00:17:12,240 --> 00:17:18,920
'application/json'. Quello che ho intenzione di fare qui è che,

219
00:17:19,920 --> 00:17:30,060
passeremo indietro questo oggetto req.file dal server al client.

220
00:17:30,060 --> 00:17:39,890
Questo oggetto req.file conterrà anche il percorso del file in

221
00:17:39,890 --> 00:17:43,735
esso e tale percorso può essere utilizzato dal client per configurare qualsiasi luogo in cui deve conoscere la posizione di questo file immagine.

222
00:17:43,735 --> 00:17:47,355
Ad esempio, se stai cercando di caricare un piatto

223
00:17:47,355 --> 00:17:51,060
sul lato server e i dettagli del piatto sul lato server,

224
00:17:51,060 --> 00:17:53,700
potresti caricare l'immagine sul server e quindi

225
00:17:53,700 --> 00:17:56,230
recuperare l'URL di quell'immagine e quindi potresti

226
00:17:56,230 --> 00:18:02,315
includere l'URL di quell'immagine nell'oggetto json che descrive il piatto.

227
00:18:02,315 --> 00:18:09,675
Quindi carica il documento json dish sul lato server.

228
00:18:09,675 --> 00:18:12,805
Quindi il req.file viene passato al client,

229
00:18:12,805 --> 00:18:18,190
il req.file come vedrete quando eseguiamo questo server,

230
00:18:18,190 --> 00:18:20,670
il req.file contiene molte informazioni

231
00:18:20,670 --> 00:18:23,370
sul file che è stato appena caricato e quindi lo

232
00:18:23,370 --> 00:18:29,700
esaminerò per ottenere informazioni sul file che ho appena caricato.

233
00:18:29,910 --> 00:18:38,405
Questo è il modo in cui stiamo andando a configurare il metodo post lì, che è tutto.

234
00:18:38,405 --> 00:18:44,330
Il mio router di caricamento è pronto per accettare i caricamenti dei file.

235
00:18:44,330 --> 00:18:51,440
Ora, tutto quello che devo fare è andare su app.js e quindi configurare il router di caricamento.

236
00:18:51,440 --> 00:18:53,335
Quindi, andando a app.js

237
00:18:53,335 --> 00:18:55,550
Abbiamo già tutti questi router.

238
00:18:55,550 --> 00:19:00,350
Quindi, lasciami copiare il loro LeaderRouter e quindi

239
00:19:00,350 --> 00:19:07,475
configurarlo come UploadRouter.

240
00:19:07,475 --> 00:19:14,150
Quindi, questo è nel file UploadRouter qui.

241
00:19:14,150 --> 00:19:18,965
Quindi, configureremo il UploadRouter e poi scendendo qui sotto,

242
00:19:18,965 --> 00:19:28,010
ora configureremo l'endpoint ImageUpload.

243
00:19:28,010 --> 00:19:32,525
Quindi, l'endpoint ImageUpload mi consente di caricare il file.

244
00:19:32,525 --> 00:19:37,880
Quindi, questo sarebbe UploadRouter. Questo è tutto.

245
00:19:37,880 --> 00:19:44,740
La mia applicazione è ora configurata per accettare i caricamenti di file.

246
00:19:44,740 --> 00:19:51,130
Quindi, salviamo le modifiche e poi andiamo a dare un'occhiata a come funziona la nostra applicazione.

247
00:19:51,130 --> 00:19:53,700
Tornando al Terminale,

248
00:19:53,700 --> 00:19:58,310
ora assicurati di avere il tuo server MongoDB installato e funzionante in

249
00:19:58,310 --> 00:20:03,020
una delle schede Terminal o in uno dei comandi Windows.

250
00:20:03,020 --> 00:20:04,640
Nell' altra finestra,

251
00:20:04,640 --> 00:20:09,210
iniziamo il server.

252
00:20:09,210 --> 00:20:12,455
Una volta che il nostro server è attivo e funzionante,

253
00:20:12,455 --> 00:20:20,120
andremo a Postman e poi invieremo o meglio caricare un file da Postman.

254
00:20:20,120 --> 00:20:22,435
Quindi, come ho detto,

255
00:20:22,435 --> 00:20:24,090
per caricare un file,

256
00:20:24,090 --> 00:20:26,920
userai il multipart/form-data.

257
00:20:26,920 --> 00:20:29,865
Quindi, prima, fammi accedere.

258
00:20:29,865 --> 00:20:33,560
Quindi, farò un post sul login degli utenti locali

259
00:20:33,560 --> 00:20:36,140
e mi collegherò come amministratore perché

260
00:20:36,140 --> 00:20:38,815
solo l'amministratore può caricare i loro file lì.

261
00:20:38,815 --> 00:20:45,350
Ricorda che il tuo server è ora in esecuzione sulla porta protetta.

262
00:20:45,350 --> 00:20:52,580
Quindi, diremo https://localhost:3443,

263
00:20:52,580 --> 00:20:56,090
e non c'è autorizzazione qui.

264
00:20:56,090 --> 00:21:03,235
Quindi, lasciami disattivare l'autorizzazione qui e poi inviare la richiesta al server.

265
00:21:03,235 --> 00:21:06,005
Quindi, in Postman, se questo sta accadendo,

266
00:21:06,005 --> 00:21:09,790
che dice che non poteva ottenere alcuna risposta,

267
00:21:09,790 --> 00:21:15,025
questo è perché ora stai eseguendo il server sicuro.

268
00:21:15,025 --> 00:21:17,095
Quindi, in questo caso,

269
00:21:17,095 --> 00:21:23,170
Postman non accetterà il certificato autofirmato che sta arrivando.

270
00:21:23,170 --> 00:21:28,790
Quindi, in tal caso, apri le impostazioni qui e nelle impostazioni,

271
00:21:28,790 --> 00:21:31,360
sotto il campo delle impostazioni generali,

272
00:21:31,360 --> 00:21:34,765
vedrai questa verifica del certificato SSL.

273
00:21:34,765 --> 00:21:38,580
Disattivalo in modo che il tuo Postman sia disposto ad accettare

274
00:21:38,580 --> 00:21:43,975
il certificato autofirmato che abbiamo installato sul lato server.

275
00:21:43,975 --> 00:21:47,450
Quindi, questo è il modo in cui sarai in grado di contattare il tuo server

276
00:21:47,450 --> 00:21:53,300
all'endpoint di accesso utente https://localhost:3443.

277
00:21:53,300 --> 00:21:55,775
Quindi, quando proviamo ad accedere ora,

278
00:21:55,775 --> 00:21:59,750
vedrai che la tua richiesta di post è stata

279
00:21:59,750 --> 00:22:03,035
accettata con successo dal server

280
00:22:03,035 --> 00:22:06,275
e quindi il server risponde con le informazioni sul token.

281
00:22:06,275 --> 00:22:12,515
Quindi, ancora una volta, per assicurarti che Postman ti permetta di contattare il server sicuro,

282
00:22:12,515 --> 00:22:16,264
fai clic su Impostazioni e in Generale,

283
00:22:16,264 --> 00:22:20,645
disattiva la convalida del certificato SSL.

284
00:22:20,645 --> 00:22:23,195
Quindi, una volta effettuato il login,

285
00:22:23,195 --> 00:22:25,605
copiamo il token qui.

286
00:22:25,605 --> 00:22:28,290
Quindi, ho intenzione di copiare il token qui.

287
00:22:28,290 --> 00:22:31,000
Ora, proviamo a caricare il file.

288
00:22:31,000 --> 00:22:34,215
Per caricare il file, come hai notato,

289
00:22:34,215 --> 00:22:36,830
abbiamo bisogno di caricare questo file in localhost: 3443,

290
00:22:36,830 --> 00:22:46,080
e l'endpoint è imageUpload.

291
00:22:47,680 --> 00:22:51,200
Per fare ImageUpload qui,

292
00:22:51,200 --> 00:22:57,360
nell'intestazione, abbiamo bisogno di configurare l'autorizzazione.

293
00:22:57,490 --> 00:23:00,560
Quindi, configureremo l'autorizzazione,

294
00:23:00,560 --> 00:23:03,035
e poi direte,

295
00:23:03,035 --> 00:23:08,820
«Portatore», e forniremo il token che abbiamo ottenuto.

296
00:23:08,820 --> 00:23:14,785
Quindi, tieni una copia del token da qualche parte e copia il token nell'intestazione.

297
00:23:14,785 --> 00:23:18,260
Nel corpo, per caricare un file,

298
00:23:18,260 --> 00:23:20,030
useremo questo forma-dati.

299
00:23:20,030 --> 00:23:24,020
Quindi, questo è ciò che ti permette di fare i dati multipart/form qui.

300
00:23:24,020 --> 00:23:26,625
Quindi, quando fai clic sui dati del modulo,

301
00:23:26,625 --> 00:23:32,310
qui puoi fornire quel file qui che volevi caricare.

302
00:23:32,310 --> 00:23:36,040
Quindi, quando si fa clic su una nuova chiave qui,

303
00:23:37,870 --> 00:23:43,040
utilizzare questa chiave come ImageFile.

304
00:23:43,040 --> 00:23:52,695
Ricordiamo che quando abbiamo configurato il metodo post sul sito UploadRouter,

305
00:23:52,695 --> 00:23:56,515
abbiamo specificato dicendo caricare singolo un ImageFile.

306
00:23:56,515 --> 00:23:59,670
Quindi, questa è la stessa chiave che userai qui.

307
00:23:59,670 --> 00:24:03,410
Quindi, quando fornisci la chiave,

308
00:24:03,410 --> 00:24:05,270
quindi la seconda parte,

309
00:24:05,270 --> 00:24:09,875
lo imposterai da Testo a File qui.

310
00:24:09,875 --> 00:24:15,595
Quindi, questo è ciò che ti permette di specificare il file come valore per questa particolare chiave.

311
00:24:15,595 --> 00:24:20,045
Quindi, vedrai questo pulsante in arrivo che dice: «Scegli file».

312
00:24:20,045 --> 00:24:25,505
Quindi, è possibile aprirlo e quindi selezionare un file che si desidera caricare.

313
00:24:25,505 --> 00:24:30,060
Quindi, qui, vado al mio,

314
00:24:30,160 --> 00:24:37,470
ho un file in una delle mie cartelle qui.

315
00:24:37,470 --> 00:24:41,685
Quindi, ho intenzione di andare in immagini di risorse,

316
00:24:41,685 --> 00:24:46,640
e poi ci limiteremo a caricare un file PNG da qui.

317
00:24:46,640 --> 00:24:48,230
Quindi, puoi dire,

318
00:24:48,230 --> 00:24:50,280
«Carica il file specifico».

319
00:24:50,280 --> 00:24:52,100
Quindi, come ricorderete,

320
00:24:52,100 --> 00:24:56,020
abbiamo configurato il nostro server per accettare solo ImageFile.

321
00:24:56,020 --> 00:24:58,720
Quindi diremo: «Carica quel particolare file».

322
00:24:58,720 --> 00:25:03,050
Quindi, quando fai clic sul pulsante Invia,

323
00:25:03,050 --> 00:25:04,940
quindi noti che nel corpo,

324
00:25:04,940 --> 00:25:07,145
devi configurarlo con i dati del modulo.

325
00:25:07,145 --> 00:25:11,240
Quindi, la multipart/form-data, e quindi la chiave è ImageFile,

326
00:25:11,240 --> 00:25:15,440
e il valore è il file che hai appena selezionato,

327
00:25:15,440 --> 00:25:17,575
quindi fai clic sul pulsante Invia.

328
00:25:17,575 --> 00:25:19,940
Quindi, quando si fa clic sul pulsante Invia,

329
00:25:19,940 --> 00:25:23,670
il file verrà caricato sul lato server e

330
00:25:23,670 --> 00:25:27,770
quindi il server risponderà con questo oggetto.

331
00:25:27,770 --> 00:25:29,770
Quindi, questo è ciò che è contenuto nell'

332
00:25:29,770 --> 00:25:34,820
oggetto req.file che è lì sull'oggetto richiesta qui.

333
00:25:34,820 --> 00:25:38,250
Quindi, questo req.file, come vedi, contiene un nomecampo.

334
00:25:38,250 --> 00:25:39,590
Nome campo è ImageFile.

335
00:25:39,590 --> 00:25:43,200
Quindi, nota che questo è esattamente lo stesso di questo qui.

336
00:25:43,200 --> 00:25:50,290
Il nome originalname, quindi si noti che l'espressione originalname contiene alberto.png,

337
00:25:50,290 --> 00:25:52,915
che è il file che ho caricato.

338
00:25:52,915 --> 00:25:56,250
Ora puoi vedere perché quando ho configurato

339
00:25:56,250 --> 00:26:00,905
la memoria e il nome del file, ho impostato file.originalname.

340
00:26:00,905 --> 00:26:03,515
Quindi, questo è ciò che verrà usato lì.

341
00:26:03,515 --> 00:26:05,410
Potete vedere il tipo di codifica,

342
00:26:05,410 --> 00:26:08,745
il tipo mimetype, e la destinazione,

343
00:26:08,745 --> 00:26:10,995
la cartella in cui è stato inserito il file,

344
00:26:10,995 --> 00:26:13,060
e il percorso effettivo del file qui,

345
00:26:13,060 --> 00:26:18,240
il percorso relativo dalla radice della cartella server qui.

346
00:26:18,240 --> 00:26:23,555
Quindi, questo percorso indica dove il file è accessibile sul lato server.

347
00:26:23,555 --> 00:26:29,865
Quindi, se si stanno configurando i dettagli di un piatto o di una guida, ad esempio,

348
00:26:29,865 --> 00:26:37,490
è sufficiente utilizzare la proprietà image del leader in images/alberto.png.

349
00:26:37,490 --> 00:26:40,390
Public non dovrebbe essere usato comunque perché la cartella pubblica è

350
00:26:40,390 --> 00:26:43,420
quella che funge da cartella principale per il nostro server.

351
00:26:43,420 --> 00:26:46,560
Quindi, hai solo bisogno di fornire queste immagini.alberto.

352
00:26:46,560 --> 00:26:49,475
Quindi, da questo percorso che si ottiene,

353
00:26:49,475 --> 00:26:52,685
una volta che il file è stato caricato correttamente,

354
00:26:52,685 --> 00:26:58,130
estrarre questa parte e quindi utilizzarla per l'immagine nel

355
00:26:58,130 --> 00:27:04,265
documento JSON che descrive il leader specifico.

356
00:27:04,265 --> 00:27:09,260
Quindi, questo è il modo in cui cariciamo un file.

357
00:27:09,260 --> 00:27:11,985
Ora, per convincervi che la multa è stata caricata,

358
00:27:11,985 --> 00:27:14,375
andiamo al nostro progetto.

359
00:27:14,375 --> 00:27:16,655
Andando al nostro progetto,

360
00:27:16,655 --> 00:27:22,215
nella cartella pubblica,

361
00:27:22,215 --> 00:27:26,325
ora puoi vedere che c'è una sottocartella di immagini lì.

362
00:27:26,325 --> 00:27:28,120
Nella sottocartella delle immagini,

363
00:27:28,120 --> 00:27:32,785
puoi vedere il file alberta.png caricato lì.

364
00:27:32,785 --> 00:27:37,635
Ora, possiamo caricare più ImageFiles nel nostro lato server.

365
00:27:37,635 --> 00:27:40,425
Ora, se si tenta di caricare un non-ImageFile,

366
00:27:40,425 --> 00:27:42,980
si vedrebbe che il server non accetterà

367
00:27:42,980 --> 00:27:46,660
un non-ImageFile e poi risponderà indietro dicendo,

368
00:27:46,660 --> 00:27:49,180
«Impossibile accettare il non-ImageFile».

369
00:27:49,180 --> 00:27:54,050
Quindi, questo è il modo in cui configureremo il nostro server espresso

370
00:27:54,050 --> 00:27:59,390
per accettare caricamenti di ImageFiles dal nostro lato client.

371
00:27:59,390 --> 00:28:03,065
Con questo, completiamo questo esercizio.

372
00:28:03,065 --> 00:28:05,400
In questo esercizio, abbiamo visto come usiamo

373
00:28:05,400 --> 00:28:09,840
il meta modulo per configurare il nostro server express per

374
00:28:09,840 --> 00:28:17,735
accettare i caricamenti di file su un endpoint API /imageUpload Rest.

375
00:28:17,735 --> 00:28:19,840
Quando pubblichiamo l'endpoint,

376
00:28:19,840 --> 00:28:25,585
il file viene caricato in una cartella specificata sul sito server.

377
00:28:25,585 --> 00:28:27,900
Con questo, completiamo questo esercizio.

378
00:28:27,900 --> 00:28:34,890
Questo è un buon momento per fare un commit git con il messaggio 'file upload'.