1
00:00:00,000 --> 00:00:04,223
[MUSIC]

2
00:00:04,223 --> 00:00:09,176
I caricamenti di file sono una funzionalità comune supportata da molti server.

3
00:00:09,176 --> 00:00:13,642
Quindi, quando compili un modulo, ad esempio, potresti avere un campo

4
00:00:13,642 --> 00:00:18,600
in cui compilare un nome di file e quindi caricare quel file sul lato server.

5
00:00:18,600 --> 00:00:19,545
Ad esempio,

6
00:00:19,545 --> 00:00:23,890
supponiamo di caricare le informazioni su un piatto sul lato server.

7
00:00:23,890 --> 00:00:28,300
Quindi vorrai anche caricare l'immagine corrispondente del piatto

8
00:00:28,300 --> 00:00:29,510
sul lato server.

9
00:00:29,510 --> 00:00:34,915
Quindi, nel processo, caricerai prima l'immagine del piatto sul lato server,

10
00:00:34,915 --> 00:00:36,770
otterrai un URL per

11
00:00:36,770 --> 00:00:41,170
quell'immagine dal lato server ovunque venga caricata e archiviata,

12
00:00:41,170 --> 00:00:53,050
quindi userai quell'immagine nel documento JSON che descrive il piatto in dettaglio.

13
00:00:53,050 --> 00:00:59,790
In modo che successivamente, quando i client recuperano il documento JSON che descrive il piatto per rendere l'interfaccia utente, quindi, dall'interno del documento JSON, saranno

14
00:00:59,790 --> 00:01:04,310
in grado di ottenere l'URL dell'immagine del piatto che è stata caricata sul lato server.

15
00:01:04,310 --> 00:01:07,510
E poi usarlo nella costruzione dell'interfaccia utente.

16
00:01:07,510 --> 00:01:12,500
Quindi, negli esempi che abbiamo visto finora, quando abbiamo guardato i dettagli di

17
00:01:12,500 --> 00:01:16,880
un piatto, abbiamo visto che c'è un'immagine riempita lì, che è una stringa,

18
00:01:16,880 --> 00:01:24,540
che non è altro che l'URL di quell'immagine corrispondente a quel piatto specifico.

19
00:01:24,540 --> 00:01:32,300
O la promozione o il lettore come abbiamo costruito nel nostro server API REST.

20
00:01:32,300 --> 00:01:37,210
Ora, in questa lezione, impareremo di più sul caricamento dei file.

21
00:01:37,210 --> 00:01:39,802
Come è supportato in un server?

22
00:01:39,802 --> 00:01:43,940
E poi come possiamo sfruttare un modulo nodo

23
00:01:43,940 --> 00:01:48,590
che ci permette di supportare il caricamento dei file.

24
00:01:50,260 --> 00:01:53,630
I caricamenti di file sono in genere supportati tramite un input di modulo.

25
00:01:53,630 --> 00:01:58,530
Quindi, in un input, se si specifica il tipo come file e

26
00:01:58,530 --> 00:02:03,800
il nome come il nome del campo lì,

27
00:02:03,800 --> 00:02:09,210
allora si sarebbe in grado di fornire il file che verrà caricato

28
00:02:09,210 --> 00:02:14,400
quando si fa clic su quel pulsante di invio per questo particolare modulo qui.

29
00:02:14,400 --> 00:02:20,234
Ora, quando le informazioni del file vengono caricate sul lato server,

30
00:02:20,234 --> 00:02:24,714
i dati del modulo stesso sono in genere codificati come

31
00:02:24,714 --> 00:02:31,200
application/x-www-form-urlencoded o multipart/form-data.

32
00:02:31,200 --> 00:02:35,900
Quindi progetti il tuo modulo, ad esempio, progetterai il tuo modulo con

33
00:02:35,900 --> 00:02:40,450
l'azione impostata su/imageUpload all'inclinazione dell'API REST,

34
00:02:40,450 --> 00:02:48,760
che fungerà da punto finale a cui esegui il post dell'immagine.

35
00:02:48,760 --> 00:02:53,870
In modo che il metodo corrispondente sia post e il tipo di codifica,

36
00:02:53,870 --> 00:02:58,140
lo imposti su multipart/form-data all'interno del modulo.

37
00:02:58,140 --> 00:03:02,797
Quindi questo significa che gli elementi del modulo verranno codificati nel tipo di codifica

38
00:03:02,797 --> 00:03:05,920
e quindi caricati sul lato server.

39
00:03:05,920 --> 00:03:11,228
Il caricamento dei file è più efficiente con multipart/form-data.

40
00:03:11,228 --> 00:03:16,130
E quindi, questo è l'approccio preferito che usiamo per caricare file.

41
00:03:17,560 --> 00:03:22,945
Ora, se vuoi saperne di più sul caricamento di file e il caricamento del

42
00:03:22,945 --> 00:03:28,843
modulo e l'applicazione/x-www-form-urlencoded o

43
00:03:28,843 --> 00:03:33,848
il multipart/form-data, puoi leggere l'HTML5

44
00:03:33,848 --> 00:03:37,410
(Raccomandazione W3C) in cui vengono forniti i dettagli, e

45
00:03:37,410 --> 00:03:42,270
anche la corrispondente richiesta IETF per commentato documenti.

46
00:03:42,270 --> 00:03:47,190
Ho collegamenti a questi nelle risorse aggiuntive nel caso in cui si desideri leggere di più

47
00:03:47,190 --> 00:03:54,070
sui dettagli effettivi di come questi tipi di codifica dei moduli sono supportati.

48
00:03:55,090 --> 00:04:00,110
Dal nostro punto di vista, quando usiamo il multipart/form-data,

49
00:04:00,110 --> 00:04:04,850
quando questo è incluso in un

50
00:04:04,850 --> 00:04:10,040
messaggio di richiesta HTTP che sta andando sul lato server, quindi nell'intestazione del messaggio di richiesta,

51
00:04:10,040 --> 00:04:15,320
si avrà un tipo di contenuto impostato su multipart/form-data.

52
00:04:15,320 --> 00:04:19,410
E poi anche un valore limite impostato in questo modo.

53
00:04:19,410 --> 00:04:23,305
Il limite separa le più parti del corpo della richiesta.

54
00:04:23,305 --> 00:04:28,215
Quindi il corpo della richiesta stesso del messaggio di richiesta in uscita sarà

55
00:04:28,215 --> 00:04:29,475
diviso in più parti.

56
00:04:29,475 --> 00:04:33,375
E ogni parte sarà delineata dalla parte precedente

57
00:04:33,375 --> 00:04:36,582
utilizzando questo limite qui.

58
00:04:36,582 --> 00:04:40,912
Ora, per illustrarvi ulteriormente i dettagli, ho truccato

59
00:04:40,912 --> 00:04:45,292
il server per stampare queste informazioni dal messaggio di richiesta in arrivo.

60
00:04:45,292 --> 00:04:49,202
In modo che possiamo esaminare questo in modo un po 'più dettagliato.

61
00:04:49,202 --> 00:04:52,092
Dando un'occhiata ai dettagli per

62
00:04:52,092 --> 00:04:57,850
un messaggio specifico che ho inviato dal mio postino al lato server,

63
00:04:57,850 --> 00:05:03,250
puoi notare che qui, ho stampato le intestazioni delle richieste qui.

64
00:05:03,250 --> 00:05:08,530
E in particolare, nell'intestazione della richiesta, vorrei attirare la vostra attenzione su questa intestazione

65
00:05:08,530 --> 00:05:13,500
qui, chiamata tipo di contenuto, che è impostata su multipart/form-data.

66
00:05:13,500 --> 00:05:17,720
E poi nota in particolare il limite definito qui

67
00:05:17,720 --> 00:05:20,660
con questo numero lungo qui dentro.

68
00:05:20,660 --> 00:05:23,500
Quindi questa è l'intestazione della richiesta per

69
00:05:23,500 --> 00:05:28,400
il messaggio di richiesta in arrivo che ho pubblicato usando il metodo post.

70
00:05:28,400 --> 00:05:32,750
In realtà, questo è esattamente il messaggio di richiesta che userò

71
00:05:32,750 --> 00:05:37,710
nell'esercizio che segue questa lezione per caricare il file.

72
00:05:37,710 --> 00:05:42,110
Quindi, quando cariciamo quel file lì, va bene, noterai che

73
00:05:42,110 --> 00:05:46,920
nel corpo della richiesta, quindi questo è dove stampa il corpo della richiesta qui sotto.

74
00:05:46,920 --> 00:05:49,010
E nel corpo della richiesta,

75
00:05:49,010 --> 00:05:54,460
noterai che stampa questa particolare linea qui.

76
00:05:54,460 --> 00:05:58,040
E questo corrisponde al confine che è specificato qui.

77
00:05:58,040 --> 00:06:04,717
Quindi questo limite specifica essenzialmente la separazione tra le varie parti

78
00:06:04,717 --> 00:06:10,070
del corpo multiparte che fa parte di questo messaggio di richiesta.

79
00:06:10,070 --> 00:06:13,330
Quindi nel corpo della richiesta, vedrai che questo viene definito qui.

80
00:06:13,330 --> 00:06:18,810
Inoltre, si specificherà anche lo stesso Content-Disposition come form-data,

81
00:06:18,810 --> 00:06:22,361
quindi lo interpreteranno come dati del modulo e

82
00:06:22,361 --> 00:06:24,920
il nome corrispondente a s ImageFile.

83
00:06:26,120 --> 00:06:30,569
E il nome del file stesso dal lato client che è stato caricato,

84
00:06:30,569 --> 00:06:33,220
il nome del file stesso è dato qui.

85
00:06:33,220 --> 00:06:38,180
E poi sotto dice Content-Type: image/png.

86
00:06:38,180 --> 00:06:41,620
Quindi sto caricando questo file immagine PNG qui.

87
00:06:41,620 --> 00:06:44,220
Quindi questo è il dettaglio che è descritto qui.

88
00:06:44,220 --> 00:06:48,870
E mentre scorri verso il basso nel corpo della richiesta stesso,

89
00:06:48,870 --> 00:06:53,480
vedrai i dettagli di ciò che è incluso nel corpo della richiesta.

90
00:06:53,480 --> 00:07:00,680
Quindi questo all'interno del file PNG qui, vedrai queste informazioni nel file PNG.

91
00:07:00,680 --> 00:07:03,970
Quindi, se apri il file PNG, questo è ciò che vedresti qui.

92
00:07:03,970 --> 00:07:07,200
Quindi questo contiene un sacco di caratteri qui,

93
00:07:07,200 --> 00:07:09,960
che ovviamente sullo schermo non possono essere stampati.

94
00:07:09,960 --> 00:07:14,980
Quindi, mentre scorri verso il basso, questo intero insieme di informazioni,

95
00:07:16,960 --> 00:07:21,730
che è in realtà ciò che è contenuto nel corpo della richiesta del

96
00:07:21,730 --> 00:07:26,310
messaggio di richiesta che sta caricando questo particolare file sul lato server.

97
00:07:26,310 --> 00:07:30,720
Quindi vedi che quel corpo contiene effettivamente la versione codificata

98
00:07:30,720 --> 00:07:33,640
dell'immagine lì.

99
00:07:33,640 --> 00:07:39,650
E questa è la fine del confine per quel corpo di richiesta.

100
00:07:39,650 --> 00:07:44,960
Quindi nel nostro messaggio di richiesta, abbiamo solo un file incluso qui.

101
00:07:44,960 --> 00:07:48,230
Puoi anche caricare più file se lo desideri.

102
00:07:48,230 --> 00:07:53,140
Ma poi, è necessario configurare il modulo npm in modo appropriato per

103
00:07:53,140 --> 00:07:55,490
accettare più file.

104
00:07:55,490 --> 00:08:02,780
Quindi, questo è il modo in cui il corpo

105
00:08:02,780 --> 00:08:08,045
della richiesta stesso contiene la versione codificata dell'immagine, da cui il server estrarrà l'immagine

106
00:08:08,045 --> 00:08:12,515
e quindi la salverà nel file con lo stesso nome di file sul lato server.

107
00:08:12,515 --> 00:08:17,245
Quindi questo è il modo in cui configureremo la nostra applicazione, l'applicazione lato server,

108
00:08:17,245 --> 00:08:21,095
da fare nell'esercizio che segue questa lezione.

109
00:08:21,095 --> 00:08:23,990
Quindi ho pensato che sarebbe stato un

110
00:08:23,990 --> 00:08:28,500
passo interessante per illustrarti esattamente cosa sta ricevendo il mio server.

111
00:08:28,500 --> 00:08:33,090
E così questo dirà perché stiamo specificando questo confine qui.

112
00:08:33,090 --> 00:08:35,230
E come, all'interno del corpo della richiesta stesso,

113
00:08:35,230 --> 00:08:41,163
stiamo usando il limite per delineare le varie parti del corpo della richiesta.

114
00:08:41,163 --> 00:08:43,895
Quindi il lato server, quando elabora,

115
00:08:43,895 --> 00:08:49,645
sarà in grado di estrarre i dati dell'immagine dal corpo della richiesta in modo appropriato

116
00:08:49,645 --> 00:08:52,660
e quindi salvare il file immagine sul lato server.

117
00:08:53,890 --> 00:08:59,030
Quindi, proprio come ho illustrato nel terminale

118
00:08:59,030 --> 00:09:03,320
lì che il limite separa la parte della richiesta multipass.

119
00:09:03,320 --> 00:09:06,538
E così hai visto il limite specificato lì.

120
00:09:06,538 --> 00:09:12,843
Per lavorare con i dati del modulo multipart contenuti nel corpo della richiesta,

121
00:09:12,843 --> 00:09:17,768
useremo un modulo NPR che supporta l'elaborazione dei

122
00:09:17,768 --> 00:09:22,610
dati del modulo multipart inclusi all'interno del corpo della richiesta.

123
00:09:22,610 --> 00:09:25,290
Estrarrà automaticamente tutto per te,

124
00:09:25,290 --> 00:09:31,218
quindi lo caricherà su due oggetti sull'oggetto richiesta sul lato server.

125
00:09:31,218 --> 00:09:36,840
Quindi questo modulo npm chiamato Multer, che quando installato

126
00:09:36,840 --> 00:09:41,280
sull'applicazione lato server e

127
00:09:41,280 --> 00:09:44,910
configura il tuo server express per utilizzare Multer.

128
00:09:44,910 --> 00:09:49,370
Quindi si sarà in grado di elaborare il messaggio di richiesta in arrivo che

129
00:09:49,370 --> 00:09:52,560
contiene questo multipart/form-data nel messaggio di richiesta.

130
00:09:52,560 --> 00:09:56,190
Quindi Multer è il modulo nodo in cui questo

131
00:09:56,190 --> 00:09:59,930
aiuterà il server a gestire multipart/form-data.

132
00:09:59,930 --> 00:10:04,330
Questo è scritto sopra un altro modulo npm chiamato busboy.

133
00:10:04,330 --> 00:10:11,480
Busboy è un modulo che elabora i dati del modulo HTML in entrata, dati generali del modulo HTML.

134
00:10:11,480 --> 00:10:16,350
E un particolare, Multer porta su busboy per consentirti di

135
00:10:16,350 --> 00:10:20,330
elaborare multipart/form-data sul tuo lato server.

136
00:10:20,330 --> 00:10:24,040
Ora, quando analizza queste informazioni, Multer

137
00:10:24,040 --> 00:10:29,280
caricherà i dati del modulo in entrata e aggiunge un oggetto corpo al req.

138
00:10:29,280 --> 00:10:34,070
Quindi avrai un oggetto req.body e anche un oggetto req.file.

139
00:10:34,070 --> 00:10:38,861
Se si carica un singolo file, allora continuerà oggetto req.file.

140
00:10:38,861 --> 00:10:44,042
Quindi, se imposti Multer per accettare più caricamenti di file,

141
00:10:44,042 --> 00:10:47,590
puoi impostare l'oggetto req.files.

142
00:10:47,590 --> 00:10:51,480
L' oggetto file sarà un array che contiene tutte le informazioni per

143
00:10:51,480 --> 00:10:54,878
ogni particolare file che viene caricato sul lato server.

144
00:10:54,878 --> 00:11:00,565
L' oggetto file contiene informazioni che riepilogano

145
00:11:00,565 --> 00:11:05,714
il modo in cui il file viene salvato sul lato server da Multer.

146
00:11:05,714 --> 00:11:09,219
Con questa rapida comprensione di come funziona il caricamento dei file,

147
00:11:09,219 --> 00:11:14,340
passiamo all'esercizio in cui configureremo effettivamente il modulo Multer.

148
00:11:14,340 --> 00:11:19,113
E poi usalo all'interno della nostra applicazione espressa per gestire i caricamenti di file

149
00:11:19,113 --> 00:11:20,685
dal lato client.

150
00:11:20,685 --> 00:11:26,869
[ MUSIC]