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

2
00:00:04,223 --> 00:00:09,176
Les téléchargements de fichiers sont une fonctionnalité commune prise en charge par de nombreux serveurs.

3
00:00:09,176 --> 00:00:13,642
Ainsi, lorsque vous remplissez un formulaire par exemple, vous pouvez avoir un champ là

4
00:00:13,642 --> 00:00:18,600
où vous remplissez un nom de fichier, puis téléchargez ce fichier sur le côté serveur.

5
00:00:18,600 --> 00:00:19,545
Par exemple,

6
00:00:19,545 --> 00:00:23,890
supposons que vous téléchargez les informations sur un plat sur le côté serveur.

7
00:00:23,890 --> 00:00:28,300
Ensuite, vous voudrez également télécharger l'image correspondante du plat

8
00:00:28,300 --> 00:00:29,510
sur le côté serveur.

9
00:00:29,510 --> 00:00:34,915
Donc, dans le processus, vous allez d'abord télécharger l'image du plat sur le côté serveur,

10
00:00:34,915 --> 00:00:36,770
obtenir une URL pour

11
00:00:36,770 --> 00:00:41,170
cette image du côté serveur partout où elle est téléchargée et stockée,

12
00:00:41,170 --> 00:00:47,380
puis utiliser cette image dans le document JSON qui décrit le plat en détail.

13
00:00:47,380 --> 00:00:53,050
Par la suite, lorsque les clients récupèrent le document JSON décrivant

14
00:00:53,050 --> 00:00:59,790
le plat afin de rendre l'interface utilisateur, puis, à partir du document JSON, ils seront

15
00:00:59,790 --> 00:01:04,310
en mesure d'obtenir l'URL de l'image plat qui a été téléchargée sur le côté serveur.

16
00:01:04,310 --> 00:01:07,510
Et puis utilisez-le dans la construction de l'interface utilisateur.

17
00:01:07,510 --> 00:01:12,500
Donc, dans les exemples que nous avons vus jusqu'à présent, quand nous avons regardé les détails d'

18
00:01:12,500 --> 00:01:16,880
un plat, nous avons vu qu'il y a une image remplie là, qui est une chaîne,

19
00:01:16,880 --> 00:01:24,540
qui n'est rien d'autre que l'URL de cette image correspondant à ce plat spécifique.

20
00:01:24,540 --> 00:01:32,300
Ou la promotion ou le lecteur que nous avons construit dans notre serveur API REST.

21
00:01:32,300 --> 00:01:37,210
Maintenant, dans cette conférence, nous allons en apprendre plus sur le téléchargement de fichiers.

22
00:01:37,210 --> 00:01:39,802
Comment est-il pris en charge dans un serveur ?

23
00:01:39,802 --> 00:01:43,940
Et puis comment nous pouvons tirer parti d'un module de nœud

24
00:01:43,940 --> 00:01:48,590
qui nous permet de prendre en charge le téléchargement de fichiers.

25
00:01:50,260 --> 00:01:53,630
Les téléchargements de fichiers sont généralement pris en charge par le biais d'une entrée de formulaire.

26
00:01:53,630 --> 00:01:58,530
Donc, dans une entrée, si vous spécifiez le type comme fichier et

27
00:01:58,530 --> 00:02:03,800
le nom comme le nom du champ là,

28
00:02:03,800 --> 00:02:09,210
alors vous serez en mesure de fournir le fichier qui sera téléchargé

29
00:02:09,210 --> 00:02:14,400
lorsque vous cliquez sur ce bouton soumettre pour ce formulaire particulier ici.

30
00:02:14,400 --> 00:02:20,234
Maintenant, lorsque les informations de fichier sont téléchargées sur le côté serveur,

31
00:02:20,234 --> 00:02:24,714
les données de formulaire elles-mêmes sont généralement codées comme

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

33
00:02:31,200 --> 00:02:35,900
Donc, vous concevez votre formulaire, par exemple, vous allez concevoir votre formulaire avec l'

34
00:02:35,900 --> 00:02:40,450
action définie sur /imageUpload à l'inclinaison de l'API REST,

35
00:02:40,450 --> 00:02:48,760
qui agira comme le point final vers lequel vous faites le post de l'image.

36
00:02:48,760 --> 00:02:53,870
Donc, cette méthode correspondante serait post, et le type d'encodage,

37
00:02:53,870 --> 00:02:58,140
vous le définiriez sur multipart/form-data dans votre formulaire.

38
00:02:58,140 --> 00:03:02,797
Cela signifie donc que les éléments de formulaire seront encodés dans le type d'encodage,

39
00:03:02,797 --> 00:03:05,920
puis téléchargés sur le côté serveur.

40
00:03:05,920 --> 00:03:11,228
Le téléchargement de fichiers est plus efficace avec les données multipart/form-data. C'

41
00:03:11,228 --> 00:03:16,130
est donc l'approche préférée que nous utilisons pour télécharger des fichiers.

42
00:03:17,560 --> 00:03:22,945
Maintenant, si vous voulez en savoir plus sur le téléchargement de fichiers et le

43
00:03:22,945 --> 00:03:28,843
téléchargement de formulaires et l'application application/x-www-form-urlencoded ou

44
00:03:28,843 --> 00:03:33,848
le multipart/form-data, alors vous pouvez lire le HTML5

45
00:03:33,848 --> 00:03:37,410
(recommandation W3C) où les détails sont donnés,

46
00:03:37,410 --> 00:03:42,270
ainsi que la requête IETF correspondante pour commenté documents.

47
00:03:42,270 --> 00:03:47,190
J' ai des liens vers ceux-ci dans les ressources supplémentaires au cas où vous souhaitez en

48
00:03:47,190 --> 00:03:54,070
savoir plus sur les détails réels de la façon dont ces types d'encodage de formulaire sont pris en charge.

49
00:03:55,090 --> 00:04:00,110
De notre point de vue, lorsque nous utilisons le multipart/form-data,

50
00:04:00,110 --> 00:04:04,850
lorsque cela est inclus dans un

51
00:04:04,850 --> 00:04:10,040
message de requête HTTP qui va vers le côté serveur, alors dans l'en-tête du message de requête,

52
00:04:10,040 --> 00:04:15,320
vous aurez un type de contenu défini sur multipart/form-data.

53
00:04:15,320 --> 00:04:19,410
Et puis aussi une valeur de limite configurée comme ça.

54
00:04:19,410 --> 00:04:23,305
La limite sépare les différentes parties du corps de la demande.

55
00:04:23,305 --> 00:04:28,215
Ainsi, le corps de la requête lui-même du message de demande sortant sera

56
00:04:28,215 --> 00:04:29,475
divisé en plusieurs parties.

57
00:04:29,475 --> 00:04:33,375
Et chaque partie sera délimitée de la partie précédente

58
00:04:33,375 --> 00:04:36,582
en utilisant cette limite ici.

59
00:04:36,582 --> 00:04:40,912
Maintenant, afin de vous illustrer davantage les détails, j'ai truqué

60
00:04:40,912 --> 00:04:45,292
le serveur pour imprimer cette information à partir du message de demande entrante.

61
00:04:45,292 --> 00:04:49,202
Pour que nous puissions l'examiner un peu plus en détail. En

62
00:04:49,202 --> 00:04:52,092
regardant les détails d'

63
00:04:52,092 --> 00:04:57,850
un message spécifique que j'ai envoyé de mon facteur au côté serveur,

64
00:04:57,850 --> 00:05:03,250
vous pouvez remarquer qu'ici, j'ai imprimé les en-têtes de requête ici.

65
00:05:03,250 --> 00:05:08,530
Et en particulier, dans l'en-tête de la requête, permettez-moi d'attirer votre attention sur cet en-tête

66
00:05:08,530 --> 00:05:13,500
ici, appelé type de contenu, qui est défini sur multipart/form-data.

67
00:05:13,500 --> 00:05:17,720
Et puis notez en particulier la limite définie ici

68
00:05:17,720 --> 00:05:20,660
avec ce nombre long ici.

69
00:05:20,660 --> 00:05:23,500
Donc, c'est l'en-tête de requête pour

70
00:05:23,500 --> 00:05:28,400
le message de demande entrant que j'ai posté en utilisant la méthode post.

71
00:05:28,400 --> 00:05:32,750
En fait, c'est exactement le message de demande que je vais utiliser

72
00:05:32,750 --> 00:05:37,710
dans l'exercice qui suit cette conférence afin de télécharger le fichier.

73
00:05:37,710 --> 00:05:42,110
Donc, quand nous téléchargeons ce fichier là, d'accord, vous remarquerez que dans

74
00:05:42,110 --> 00:05:46,920
le corps de la requête, donc c'est là que j'affiche le corps de la requête ci-dessous.

75
00:05:46,920 --> 00:05:49,010
Et dans le corps de la requête,

76
00:05:49,010 --> 00:05:54,460
vous remarquerez qu'il imprime cette ligne particulière ici.

77
00:05:54,460 --> 00:05:58,040
Et cela correspond à la limite qui est spécifiée ici.

78
00:05:58,040 --> 00:06:04,717
Donc, cette limite spécifie essentiellement la séparation entre les différentes parties

79
00:06:04,717 --> 00:06:10,070
du corps en plusieurs parties qui fait partie de ce message de requête.

80
00:06:10,070 --> 00:06:13,330
Donc, dans le corps de la requête, vous verrez cela être défini ici.

81
00:06:13,330 --> 00:06:18,810
En outre, vous spécifiez également le même Content-Disposition que form-data,

82
00:06:18,810 --> 00:06:22,361
ce qui signifie qu'ils interpréteront cela comme des données de formulaire et

83
00:06:22,361 --> 00:06:24,920
le nom correspondant a s ImageFile.

84
00:06:26,120 --> 00:06:30,569
Et le nom de fichier lui-même du côté client qui a été téléchargé,

85
00:06:30,569 --> 00:06:33,220
le nom de fichier lui-même est donné ici.

86
00:06:33,220 --> 00:06:38,180
Et puis en bas, il est dit Content-Type : image/png.

87
00:06:38,180 --> 00:06:41,620
Donc, je télécharge ce fichier image PNG ici.

88
00:06:41,620 --> 00:06:44,220
Donc, ce sont les détails qui sont décrits ici.

89
00:06:44,220 --> 00:06:48,870
Et lorsque vous faites défiler vers le bas dans le corps de la requête lui-même,

90
00:06:48,870 --> 00:06:53,480
vous verrez les détails de ce qui est inclus dans le corps de la requête.

91
00:06:53,480 --> 00:07:00,680
Donc, ceci à l'intérieur du fichier PNG ici, vous verrez cette information dans le fichier PNG.

92
00:07:00,680 --> 00:07:03,970
Donc, si vous ouvrez le fichier PNG, c'est ce que vous verrez ici.

93
00:07:03,970 --> 00:07:07,200
Donc, cela contient tout un tas de caractères ici,

94
00:07:07,200 --> 00:07:09,960
qui évidemment à l'écran ne peuvent pas être imprimés.

95
00:07:09,960 --> 00:07:14,980
Donc, lorsque vous faites défiler vers le bas, vous allez tout cet ensemble d'informations,

96
00:07:16,960 --> 00:07:21,730
qui est en fait ce qui est contenu dans le corps de la requête du

97
00:07:21,730 --> 00:07:26,310
message qui télécharge ce fichier particulier sur le côté serveur.

98
00:07:26,310 --> 00:07:30,720
Donc, vous voyez que ce corps contient en fait la version encodée

99
00:07:30,720 --> 00:07:33,640
de l'image là-bas.

100
00:07:33,640 --> 00:07:39,650
Et c'est la fin de la limite pour ce corps de requête.

101
00:07:39,650 --> 00:07:44,960
Donc, dans notre message de demande, nous avons juste un fichier inclus ici.

102
00:07:44,960 --> 00:07:48,230
Vous pouvez également télécharger plusieurs fichiers si vous le souhaitez.

103
00:07:48,230 --> 00:07:53,140
Mais alors, vous devez configurer le module npm de manière appropriée pour

104
00:07:53,140 --> 00:07:55,490
accepter plusieurs fichiers.

105
00:07:55,490 --> 00:08:02,780
Donc, c'est ainsi que votre corps de requête contient lui-même la version encodée

106
00:08:02,780 --> 00:08:08,045
de l'image, à partir de laquelle votre serveur va extraire l'image,

107
00:08:08,045 --> 00:08:12,515
puis l'enregistrer dans le fichier avec le même nom de fichier côté serveur.

108
00:08:12,515 --> 00:08:17,245
C' est ainsi que nous allons configurer notre application, l'application côté serveur,

109
00:08:17,245 --> 00:08:21,095
à faire dans l'exercice qui suit cette conférence.

110
00:08:21,095 --> 00:08:23,990
J' ai donc pensé que ce serait une

111
00:08:23,990 --> 00:08:28,500
étape intéressante pour vous illustrer exactement ce que mon serveur reçoit.

112
00:08:28,500 --> 00:08:33,090
Et donc cela dira pourquoi nous spécifions cette limite ici.

113
00:08:33,090 --> 00:08:35,230
Et comment, dans le corps de la requête lui-même,

114
00:08:35,230 --> 00:08:41,163
nous utilisons la limite pour délimiter les différentes parties du corps de la requête.

115
00:08:41,163 --> 00:08:43,895
Ainsi, le côté serveur, lorsqu'il traite,

116
00:08:43,895 --> 00:08:49,645
sera en mesure d'extraire les données d'image du corps de la requête de manière appropriée,

117
00:08:49,645 --> 00:08:52,660
puis d'enregistrer le fichier image côté serveur.

118
00:08:53,890 --> 00:08:59,030
Donc, tout comme j'ai illustré dans le terminal,

119
00:08:59,030 --> 00:09:03,320
cette limite sépare la partie de requête multipass.

120
00:09:03,320 --> 00:09:06,538
Et donc vous avez vu la limite spécifiée là.

121
00:09:06,538 --> 00:09:12,843
Afin de travailler avec les données de formulaire en plusieurs parties contenues dans le corps de la requête,

122
00:09:12,843 --> 00:09:17,768
nous allons utiliser un module NPR qui prend en charge le traitement

123
00:09:17,768 --> 00:09:22,610
des données de formulaire en plusieurs parties incluses dans le corps de la requête.

124
00:09:22,610 --> 00:09:25,290
Il va extraire automatiquement tout pour vous,

125
00:09:25,290 --> 00:09:31,218
puis le charger sur deux objets de l'objet requête côté serveur.

126
00:09:31,218 --> 00:09:36,840
Donc, ce module npm appelé Multer, qui lorsqu'il est installé

127
00:09:36,840 --> 00:09:41,280
sur votre application côté serveur et

128
00:09:41,280 --> 00:09:44,910
configurer votre serveur express pour utiliser Multer.

129
00:09:44,910 --> 00:09:49,370
Ensuite, vous serez en mesure de traiter le message de demande entrante qui

130
00:09:49,370 --> 00:09:52,560
contient ce multipart/form-data dans le message de demande.

131
00:09:52,560 --> 00:09:56,190
Donc Multer est le module de nœud où cela

132
00:09:56,190 --> 00:09:59,930
aidera le serveur à gérer multipart/form-data.

133
00:09:59,930 --> 00:10:04,330
Ceci est écrit sur un autre module npm appelé busboy.

134
00:10:04,330 --> 00:10:11,480
Busboy est un module qui traite les données de formulaire HTML entrantes, les données générales de formulaire HTML.

135
00:10:11,480 --> 00:10:16,350
Et un particulier, Multer met sur busboy pour vous permettre de

136
00:10:16,350 --> 00:10:20,330
traiter plusieurs parties /form-data sur votre serveur.

137
00:10:20,330 --> 00:10:24,040
Maintenant, quand il analyse ces informations, Multer va

138
00:10:24,040 --> 00:10:29,280
charger les données de formulaire entrantes et il ajoute un objet body à la req.

139
00:10:29,280 --> 00:10:34,070
Ainsi, vous aurez un objet req.body et aussi un objet req.file.

140
00:10:34,070 --> 00:10:38,861
Si vous téléchargez un seul fichier, alors il continuera req.file objet.

141
00:10:38,861 --> 00:10:44,042
Ensuite, si vous configurez votre Multer pour accepter plusieurs téléchargements de fichiers,

142
00:10:44,042 --> 00:10:47,590
vous pouvez configurer l'objet req.files.

143
00:10:47,590 --> 00:10:51,480
L' objet files sera un tableau qui contient toutes les informations pour

144
00:10:51,480 --> 00:10:54,878
chaque fichier particulier qui est téléchargé sur le côté serveur.

145
00:10:54,878 --> 00:11:00,565
L' objet fichier lui-même contient des informations qui résument

146
00:11:00,565 --> 00:11:05,714
la façon dont le fichier est enregistré côté serveur par Multer.

147
00:11:05,714 --> 00:11:09,219
Avec cette compréhension rapide du fonctionnement du téléchargement de fichiers,

148
00:11:09,219 --> 00:11:14,340
passons à l'exercice où nous allons réellement configurer le module Multer.

149
00:11:14,340 --> 00:11:19,113
Et puis utilisez-le dans notre application express pour gérer les téléchargements

150
00:11:19,113 --> 00:11:20,685
de fichiers du côté client.

151
00:11:20,685 --> 00:11:26,869
[ MUSIQUE]