1
00:00:03,680 --> 00:00:05,985
Dans la leçon précédente,

2
00:00:05,985 --> 00:00:08,880
nous avons appris comment les téléchargements de fichiers sont

3
00:00:08,880 --> 00:00:12,445
pris en charge par l'approche de données multi-plateformes.

4
00:00:12,445 --> 00:00:16,320
Dans cet exercice, nous allons utiliser le module Multer,

5
00:00:16,320 --> 00:00:21,885
auquel nous avons fait référence dans la conférence pour permettre à notre serveur express de

6
00:00:21,885 --> 00:00:27,820
prendre en charge le téléchargement de fichiers image sur notre site serveur.

7
00:00:27,820 --> 00:00:33,920
Ils stockent ces fichiers images dans le dossier public/images.

8
00:00:33,920 --> 00:00:40,370
Ces images seraient utiles dans notre application lorsque nous fournissons

9
00:00:40,370 --> 00:00:46,690
des images pour les différents plats ou les radars ou les promotions,

10
00:00:46,690 --> 00:00:51,490
que nous avons construites dans notre serveur API REST.

11
00:00:51,490 --> 00:00:54,495
Pour commencer avec cet exercice,

12
00:00:54,495 --> 00:00:55,770
la première étape bien sûr

13
00:00:55,770 --> 00:01:01,445
est d'installer le module Multer donc à l'invite de type npm installer

14
00:01:01,445 --> 00:01:10,145
multer moins save et pour le moment j'utilise multer 1.3.1 dans ce cours.

15
00:01:10,145 --> 00:01:12,785
Donc, une fois que nous avons installé le module multer,

16
00:01:12,785 --> 00:01:21,695
allons à notre projet et ensuite implémentons une nouvelle route qui nous permet de télécharger des fichiers.

17
00:01:21,695 --> 00:01:25,920
Allez dans le projet dans le dossier routes,

18
00:01:25,920 --> 00:01:33,210
ajoutons un nouveau fichier nommé upload router.js.

19
00:01:33,210 --> 00:01:37,260
Ce routeur, routeur express que nous allons implémenter ici,

20
00:01:37,260 --> 00:01:43,380
est celui qui va prendre en charge le téléchargement des fichiers.

21
00:01:43,380 --> 00:01:46,250
Donc, dans le routeur de téléchargement, laissez-moi simplement aller

22
00:01:46,250 --> 00:01:50,120
au routeur plat et copier ces premières choses du routeur plat

23
00:01:50,120 --> 00:01:52,550
parce que nous allons à peu près mettre en place

24
00:01:52,550 --> 00:01:57,440
une structure similaire dans notre application ou le routeur de téléchargement.

25
00:01:57,440 --> 00:02:00,720
Donc, laissez-moi copier cette partie et ensuite nous allons éditer ça.

26
00:02:00,720 --> 00:02:02,800
Donc, dans le routeur de téléchargement,

27
00:02:02,800 --> 00:02:09,850
je n'ai pas besoin de mongoose donc je vais enlever mongoose et je n'ai pas besoin de la vaisselle non plus.

28
00:02:09,850 --> 00:02:12,755
Donc, ces deux-là seraient supprimés et après cela,

29
00:02:12,755 --> 00:02:15,935
nous devons exprimer l'analyseur de corps et nous authentifier.

30
00:02:15,935 --> 00:02:25,585
Maintenant, je vais demander le module multer ici.

31
00:02:25,585 --> 00:02:29,280
Une fois que nous incluons le module multer,

32
00:02:29,280 --> 00:02:35,585
maintenant ce routeur, je vais appeler cela comme routeur de téléchargement.

33
00:02:35,585 --> 00:02:42,020
Donc, dira uploader routeur utiliser l'analyseur corps et

34
00:02:42,020 --> 00:02:48,040
puis celui-ci, mais le routeur de téléchargement et encore une fois,

35
00:02:48,040 --> 00:02:58,110
n'oubliez pas de dire les exportations de module, télécharger le routeur ici.

36
00:02:58,110 --> 00:03:00,570
Donc, pour la route des routeurs de téléchargement,

37
00:03:00,570 --> 00:03:03,025
nous devons ajouter les différentes méthodes.

38
00:03:03,025 --> 00:03:07,130
Je vais le faire un peu plus tard, mais avant cela, nous allons mettre en place

39
00:03:07,130 --> 00:03:11,765
multer pour nous permettre de télécharger les fichiers.

40
00:03:11,765 --> 00:03:19,545
Maintenant, par défaut, multer peut être configuré en utilisant simplement multer dans notre application,

41
00:03:19,545 --> 00:03:24,360
mais je vais faire une configuration de multer dans

42
00:03:24,360 --> 00:03:28,100
cet exercice afin que nous puissions

43
00:03:28,100 --> 00:03:32,615
personnaliser la façon dont multer gère le téléchargement des fichiers.

44
00:03:32,615 --> 00:03:35,150
Donc, pour utiliser le multer,

45
00:03:35,150 --> 00:03:43,455
l'une des options que le multer prend est pour le stockage.

46
00:03:43,455 --> 00:03:49,295
Donc, multer fournit cette fonction de stockage de disque qui

47
00:03:49,295 --> 00:03:56,480
nous permet de définir le moteur de stockage et ici nous pouvons configurer quelques choses.

48
00:03:56,480 --> 00:04:00,409
Maintenant, s'il s'agit simplement de configurer la destination,

49
00:04:00,409 --> 00:04:03,830
vous pouvez simplement dire dest deux-points,

50
00:04:03,830 --> 00:04:08,810
puis spécifier le dossier de destination dans lequel les fichiers téléchargés seront stockés.

51
00:04:08,810 --> 00:04:15,450
Mais ici, je vais faire une configuration supplémentaire pour le module multer ici.

52
00:04:15,450 --> 00:04:19,715
Donc, c'est là que je vais utiliser le support de stockage de disque multer.

53
00:04:19,715 --> 00:04:22,025
À l'intérieur du stockage sur disque,

54
00:04:22,025 --> 00:04:27,080
je peux définir quelques options ici.

55
00:04:27,080 --> 00:04:32,315
Les options que je vais définir vont être

56
00:04:32,315 --> 00:04:40,535
destination et la seconde est le nom du fichier.

57
00:04:40,535 --> 00:04:45,725
Donc, deux configurations que je vais fournir au stockage sur disque.

58
00:04:45,725 --> 00:04:48,860
La destination comme vous vous attendez,

59
00:04:48,860 --> 00:04:56,405
me permet de configurer la destination et cela prend

60
00:04:56,405 --> 00:05:03,450
comme une configuration ici une fonction.

61
00:05:03,450 --> 00:05:06,980
Ainsi, la destination est configurée en tant que fonction ici.

62
00:05:06,980 --> 00:05:14,060
Cette fonction recevra la requête et aussi un objet appelé le fichier,

63
00:05:14,060 --> 00:05:16,790
qui contient des informations sur le fichier qui a

64
00:05:16,790 --> 00:05:21,930
été traité par multer et aussi une fonction de rappel.

65
00:05:21,930 --> 00:05:24,045
Donc, cb est la fonction de rappel.

66
00:05:24,045 --> 00:05:27,915
Donc, ici pour la destination,

67
00:05:27,915 --> 00:05:32,865
je vais dire cb null,

68
00:05:32,865 --> 00:05:37,054
le deuxième paramètre est le dossier de destination,

69
00:05:37,054 --> 00:05:41,330
qui peut être exprimé sous la forme d'une chaîne où les fichiers seront stockés.

70
00:05:41,330 --> 00:05:51,025
Donc, ici, je vais fournir la destination sous forme d'images de barre oblique publique.

71
00:05:51,025 --> 00:05:54,980
Parce que dans cet exercice, je vais prendre en charge les téléchargements d'images.

72
00:05:54,980 --> 00:05:59,865
Donc, c'est la partie que je vais spécifier ici, donc le téléchargement d'image.

73
00:05:59,865 --> 00:06:03,800
Ainsi, la fonction de rappel comme vous le voyez prend deux paramètres.

74
00:06:03,800 --> 00:06:04,820
Le premier est, bien sûr,

75
00:06:04,820 --> 00:06:07,460
l'erreur qui dans ce cas, je vais la mettre à

76
00:06:07,460 --> 00:06:11,335
null et le second est le dossier de destination,

77
00:06:11,335 --> 00:06:14,110
où mes images vont être stockées.

78
00:06:14,110 --> 00:06:19,010
Donc, je peux configurer cela en disant des images slash publiques.

79
00:06:19,010 --> 00:06:20,995
Ainsi, dans le dossier images,

80
00:06:20,995 --> 00:06:24,300
les fichiers que je télécharge seront stockés.

81
00:06:24,300 --> 00:06:26,370
Pour le nom de fichier aussi,

82
00:06:26,370 --> 00:06:31,320
il obtient les trois paramètres,

83
00:06:31,320 --> 00:06:35,985
message de requête, fichier et la fonction de rappel.

84
00:06:35,985 --> 00:06:39,345
En configurant la façon dont la fonction de rappel est appelée,

85
00:06:39,345 --> 00:06:42,140
nous pouvons spécifier des informations sur le nom de fichier.

86
00:06:42,140 --> 00:06:47,205
Donc, pour la fonction de rappel, je dirais cb null et il n'y a pas d'erreur ici.

87
00:06:47,205 --> 00:06:51,860
Ensuite, le second insiste sur le nom du fichier,

88
00:06:51,860 --> 00:06:56,430
qui va être utilisé pour le fichier spécifique qui vient d'être téléchargé,

89
00:06:56,430 --> 00:06:57,975
comment il va être stocké.

90
00:06:57,975 --> 00:07:01,835
Donc, cet objet de fichier que j'ai obtenu ici,

91
00:07:01,835 --> 00:07:08,595
supporte un ensemble de plusieurs propriétés dessus.

92
00:07:08,595 --> 00:07:11,985
L' une des propriétés est appelée, nom d'origine.

93
00:07:11,985 --> 00:07:14,585
Donc, le nom original essentiellement,

94
00:07:14,585 --> 00:07:19,475
nous donne le nom original du fichier du côté client qui a été téléchargé.

95
00:07:19,475 --> 00:07:23,410
J' insiste pour que, lorsque le fichier est enregistré côté serveur,

96
00:07:23,410 --> 00:07:26,380
le fichier sera donné exactement le même nom

97
00:07:26,380 --> 00:07:29,710
que le nom d'origine du fichier qui a été téléchargé.

98
00:07:29,710 --> 00:07:32,605
Pour que je puisse savoir que je télécharge

99
00:07:32,605 --> 00:07:35,140
exactement le même fichier et du côté serveur lorsque

100
00:07:35,140 --> 00:07:38,200
le fichier est téléchargé sera stocké avec le même nom.

101
00:07:38,200 --> 00:07:42,000
Maintenant, si vous ne configurez pas cela alors,

102
00:07:42,000 --> 00:07:45,100
multer par défaut donnera une chaîne aléatoire

103
00:07:45,100 --> 00:07:48,130
comme le nom du fichier sans extensions.

104
00:07:48,130 --> 00:07:51,590
Donc, ce n'est peut-être pas quelque chose que vous seriez

105
00:07:51,590 --> 00:07:55,290
heureux d'utiliser dans cet exercice particulier.

106
00:07:55,290 --> 00:07:58,940
Donc, c'est pourquoi je configure explicitement en disant que,

107
00:07:58,940 --> 00:08:04,805
le fichier doit être stocké avec le nom d'origine du fichier qui a été téléchargé.

108
00:08:04,805 --> 00:08:08,300
Nous allons à nouveau rencontrer cet objet de fichier

109
00:08:08,300 --> 00:08:11,630
un peu plus en détail et voir comment nous

110
00:08:11,630 --> 00:08:15,245
pouvons utiliser les informations de l'objet de fichier un peu plus tard.

111
00:08:15,245 --> 00:08:22,790
En outre, je peux également spécifier un filtre de fichier ici pour la configuration multers.

112
00:08:22,790 --> 00:08:28,145
Le filtre de fichiers me permettra de spécifier le type de fichiers que

113
00:08:28,145 --> 00:08:33,410
je suis prêt à télécharger ou que je suis prêt à accepter pour le téléchargement.

114
00:08:33,410 --> 00:08:37,310
Donc, pour ce faire, je vais mettre en place une autre fonction appelée

115
00:08:37,310 --> 00:08:42,480
filtre de fichier image const

116
00:08:43,360 --> 00:08:48,755
et celle-ci je vais définir la fonction dans une minute.

117
00:08:48,755 --> 00:08:51,530
Maintenant, pour cela, je peux aussi enregistrer ceci en tant que

118
00:08:51,530 --> 00:08:55,580
stockage const parce que nous avons utilisé const pour tout,

119
00:08:55,580 --> 00:08:57,650
donc, je vais juste dire const storage.

120
00:08:57,650 --> 00:08:59,480
Pour le filtre de fichier image,

121
00:08:59,480 --> 00:09:01,490
je dirai le filtre de fichier image const.

122
00:09:01,490 --> 00:09:07,725
Encore une fois, il reçoit trois paramètres requête

123
00:09:07,725 --> 00:09:11,780
, objet, l'objet fichier qui contient les informations sur

124
00:09:11,780 --> 00:09:15,660
le fichier qui a été téléchargé et la fonction de rappel ici.

125
00:09:15,660 --> 00:09:17,260
Grâce à la fonction de rappel,

126
00:09:17,260 --> 00:09:22,535
je transmets des informations à ma configuration multer qui

127
00:09:22,535 --> 00:09:27,800
me permet de spécifier comment je vais stocker ces informations.

128
00:09:27,800 --> 00:09:30,590
Donc, cela va être une fonction de flèche ici.

129
00:09:30,590 --> 00:09:35,800
A l'intérieur de cette fonction de flèche ce que je vais vérifier est que,

130
00:09:35,800 --> 00:09:45,405
je dirai si ce n'est pas le nom d'origine du fichier.

131
00:09:45,405 --> 00:09:49,340
Donc, le nom d'origine est une chaîne ici.

132
00:09:49,340 --> 00:09:55,780
Donc, j'essaie de voir s'il y a une correspondance pour cette chaîne en disant,

133
00:09:55,780 --> 00:09:58,260
à l'intérieur ici une expression régulière.

134
00:09:58,260 --> 00:10:01,570
Donc, l'expression régulière que je vais spécifier comme barre oblique,

135
00:10:01,570 --> 00:10:05,505
point de barre oblique inverse et ensuite,

136
00:10:05,505 --> 00:10:09,565
les options que je vais spécifier sont jpg

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

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

139
00:10:25,250 --> 00:10:31,575
Donc, c'est ainsi que je spécifie l'expression régulière là.

140
00:10:31,575 --> 00:10:32,785
Pour dire que

141
00:10:32,785 --> 00:10:38,515
c'est correct, si l'extension du fichier contient jpg ou jpeg ou png ou gif,

142
00:10:38,515 --> 00:10:44,630
alors je traiterai cela comme un fichier image et je serai prêt à accepter ces fichiers.

143
00:10:44,630 --> 00:10:47,225
Donc, c'est ce que nous testons ici.

144
00:10:47,225 --> 00:10:49,690
Si c'est le cas,

145
00:10:49,690 --> 00:10:54,920
c'est si l'extension de fichier ne correspond à aucune de ces choses, donc,

146
00:10:54,920 --> 00:11:02,460
c'est pourquoi nous ne voyons pas alors nous allons dire, retourner cb.

147
00:11:02,460 --> 00:11:07,890
Ensuite, notez que, le cb le premier paramètre serait une erreur.

148
00:11:07,890 --> 00:11:12,150
Donc, je vais retourner une nouvelle erreur

149
00:11:12,150 --> 00:11:18,375
disant que vous pouvez télécharger uniquement des fichiers image.

150
00:11:18,375 --> 00:11:23,195
Donc, nous insistons sur le fait que les seuls fichiers qu'ils

151
00:11:23,195 --> 00:11:28,565
accepteront sont des fichiers image et que le second paramètre serait faux.

152
00:11:28,565 --> 00:11:32,240
Parce que nous fournissons l'erreur comme premier paramètre,

153
00:11:32,240 --> 00:11:35,460
le second paramètre est défini sur false.

154
00:11:36,620 --> 00:11:44,340
Le contraire dit cb null true.

155
00:11:44,340 --> 00:11:49,840
Donc, ce qui signifie que le fichier qui essaie d'être

156
00:11:49,840 --> 00:11:55,440
téléchargé correspond au modèle et donc c'est un fichier image,

157
00:11:55,440 --> 00:11:57,955
et donc nous sommes prêts à le laisser être téléchargé.

158
00:11:57,955 --> 00:12:03,410
Deux configurations que nous allons fournir à ce module multer.

159
00:12:03,410 --> 00:12:07,475
Comment configurer le module multer pour une utilisation dans notre application ?

160
00:12:07,475 --> 00:12:12,489
C' est là que je vais déclarer const upload

161
00:12:12,489 --> 00:12:19,300
comme multer et ensuite je spécifierais entre parenthèses que les options ici.

162
00:12:19,300 --> 00:12:27,790
Je peux spécifier le stockage comme fonction de stockage que je viens de définir ici.

163
00:12:27,790 --> 00:12:31,645
Cette fonction de stockage est le premier paramètre,

164
00:12:31,645 --> 00:12:35,625
et le second paramètre est un filtre de fichiers.

165
00:12:35,625 --> 00:12:40,335
Un filtre de fichier est une méthode

166
00:12:40,335 --> 00:12:46,760
qui me permet de spécifier le type de fichier que je suis prêt à accepter et ensuite je dirai, filtre de fichier image.

167
00:12:46,760 --> 00:12:48,890
Il suffit de basculer le mot wrap, de

168
00:12:48,890 --> 00:12:51,860
sorte que vous puissiez voir toute la ligne ici.

169
00:12:51,860 --> 00:12:57,045
Donc, il dit que vous pouvez télécharger uniquement des fichiers image et puis pour le multer,

170
00:12:57,045 --> 00:13:01,750
je suis en train de configurer le filtre d'image, c'est tout.

171
00:13:01,750 --> 00:13:10,435
Mon module multer est maintenant configuré pour me permettre de télécharger les fichiers image ici.

172
00:13:10,435 --> 00:13:15,115
Ensuite, continuons maintenant et configurez le routeur de téléchargement.

173
00:13:15,115 --> 00:13:16,670
Pour le routeur de téléchargement,

174
00:13:16,670 --> 00:13:20,325
je vais autoriser uniquement la méthode post ici.

175
00:13:20,325 --> 00:13:21,910
Ainsi, les

176
00:13:21,910 --> 00:13:30,125
méthodes get, put et delete ne seront pas autorisées sur le point de terminaison du routeur de téléchargement.

177
00:13:30,125 --> 00:13:32,130
Pour m'aider à faire cela,

178
00:13:32,130 --> 00:13:38,270
je vais aller au routeur à plat et puis me rappeler que nous avions le mettre configuré ici déjà.

179
00:13:38,270 --> 00:13:42,230
Je vais copier cela, puis venir au

180
00:13:42,230 --> 00:13:47,730
routeur de téléchargement et puis je vais coller cette information ici.

181
00:13:47,730 --> 00:13:53,500
Nous dirons, si c'est une opération get, je ne vais pas

182
00:13:53,500 --> 00:14:02,230
prendre en charge que sur le point de terminaison serait ImageUpload.

183
00:14:02,580 --> 00:14:05,545
Le get ne sera pas autorisé,

184
00:14:05,545 --> 00:14:13,040
et de même le put ne sera pas autorisé,

185
00:14:13,710 --> 00:14:20,000
et aussi supprimer ne sera pas autorisé.

186
00:14:20,640 --> 00:14:31,310
Je ne vais pas prendre en charge aucune de ces opérations, alors mettez, supprimez.

187
00:14:31,310 --> 00:14:33,555
Ces trois ne seront pas autorisés.

188
00:14:33,555 --> 00:14:40,030
La seule méthode que je vais soutenir est la méthode post.

189
00:14:40,030 --> 00:14:41,920
Pour la méthode post,

190
00:14:41,920 --> 00:14:47,950
nous allons faire cette authentification jusqu'à ce point.

191
00:14:47,950 --> 00:14:50,560
Je vais juste copier cela là-dedans,

192
00:14:50,560 --> 00:14:57,205
fermer ce point de terminaison et pour le post.

193
00:14:57,205 --> 00:14:59,125
Quand un fichier est posté,

194
00:14:59,125 --> 00:15:03,035
comment traitons-nous ce post ?

195
00:15:03,035 --> 00:15:06,320
Pour gérer le post ici,

196
00:15:06,320 --> 00:15:09,885
je n'ai pas besoin de la prochaine pour cela.

197
00:15:09,885 --> 00:15:15,485
Maintenant, en plus de l'authentification VerifyUser et authentifier VerifyAdmin,

198
00:15:15,485 --> 00:15:21,280
sur la même ligne, je vais configurer le téléchargement.

199
00:15:21,280 --> 00:15:27,270
Donc, rappelez-vous que j'avais configuré le téléchargement en utilisant multer ici.

200
00:15:27,270 --> 00:15:29,790
Donc, je vais utiliser le téléchargement qui

201
00:15:29,790 --> 00:15:34,200
prend en charge une fonction appelée upload.single.

202
00:15:34,200 --> 00:15:42,400
Cette seule fonction prend comme paramètre.

203
00:15:42,400 --> 00:15:49,630
Le nom du champ de formulaire qui spécifie ce fichier,

204
00:15:49,630 --> 00:15:52,300
vous verrez que dans un court laps de temps.

205
00:15:52,300 --> 00:16:01,930
Ce champ de formulaire je vais le nommer comme ImageFile ici.

206
00:16:01,930 --> 00:16:09,455
Télécharger simple signifie qu'il va me permettre de télécharger un seul fichier ici.

207
00:16:09,455 --> 00:16:15,065
Ce fichier unique spécifiera dans le formulaire de téléchargement à partir du côté client

208
00:16:15,065 --> 00:16:21,730
dans le téléchargement de formulaire en plusieurs parties en utilisant ce nom là.

209
00:16:21,860 --> 00:16:26,525
Lorsque le fichier est obtenu dans le code,

210
00:16:26,525 --> 00:16:28,060
si j'arrive à ce point,

211
00:16:28,060 --> 00:16:32,290
ce téléchargement prendra soin de gérer les erreurs s'il y en a,

212
00:16:32,290 --> 00:16:36,585
si le fichier n'est pas correctement téléchargé et ainsi de suite.

213
00:16:36,585 --> 00:16:38,315
Lorsque vous arrivez à ce point,

214
00:16:38,315 --> 00:16:40,630
le fichier aurait été téléchargé avec succès et

215
00:16:40,630 --> 00:16:43,510
vous devez donc gérer le fichier téléchargé.

216
00:16:43,510 --> 00:16:52,750
À ce stade, nous dirons que RES.statusCode est

217
00:16:52,750 --> 00:17:02,780
200, puis RES.setHeader Content-Type,

218
00:17:12,240 --> 00:17:18,920
'application/json'. Ce que je vais faire ici, c'est que,

219
00:17:19,920 --> 00:17:30,060
nous allons retourner cet objet req.file du serveur au client.

220
00:17:30,060 --> 00:17:36,570
Cet objet req.file contiendra également le chemin d'accès au fichier et ce chemin peut être

221
00:17:36,570 --> 00:17:39,890
utilisé par le client pour configurer n'importe quel endroit

222
00:17:39,890 --> 00:17:43,735
où il a besoin de connaître l'emplacement de ce fichier image.

223
00:17:43,735 --> 00:17:47,355
Par exemple, si vous essayez de télécharger un plat

224
00:17:47,355 --> 00:17:51,060
côté serveur et les détails du plat côté serveur,

225
00:17:51,060 --> 00:17:53,700
vous pouvez télécharger l'image sur le serveur, puis

226
00:17:53,700 --> 00:17:56,230
vous récupérez l'URL de cette image, puis vous pouvez

227
00:17:56,230 --> 00:18:02,315
inclure l'URL de cette image dans l'objet json qui décrit le plat.

228
00:18:02,315 --> 00:18:09,675
Ensuite, téléchargez le document dish json sur le côté serveur.

229
00:18:09,675 --> 00:18:12,805
Ensuite, le fichier req.file est transmis au client,

230
00:18:12,805 --> 00:18:18,190
le fichier req.comme vous le verrez lorsque nous exécutons ce serveur,

231
00:18:18,190 --> 00:18:20,670
le fichier req.contient beaucoup d'informations sur

232
00:18:20,670 --> 00:18:23,370
le fichier qui vient d'être téléchargé et donc je vais l'

233
00:18:23,370 --> 00:18:29,700
examiner pour obtenir des informations sur le fichier que je viens de télécharger.

234
00:18:29,910 --> 00:18:38,405
C' est ainsi que nous allons configurer la méthode post là, c'est tout.

235
00:18:38,405 --> 00:18:44,330
Mon routeur de téléchargement est prêt à accepter les téléchargements des fichiers.

236
00:18:44,330 --> 00:18:51,440
Maintenant, tout ce que je dois faire est d'aller à app.js, puis configurer le routeur de téléchargement.

237
00:18:51,440 --> 00:18:53,335
Donc, aller à app.js

238
00:18:53,335 --> 00:18:55,550
Nous avons déjà tous ces routeurs.

239
00:18:55,550 --> 00:19:00,350
Donc, laissez-moi simplement copier leur LeaderRouter, puis

240
00:19:00,350 --> 00:19:07,475
configurer ceci comme UploadRouter.

241
00:19:07,475 --> 00:19:14,150
Donc, c'est dans le fichier UploadRouter ici.

242
00:19:14,150 --> 00:19:18,965
Donc, nous allons configurer le UploadRouter et ensuite descendre ci-dessous,

243
00:19:18,965 --> 00:19:28,010
nous allons maintenant configurer le point de terminaison ImageUpload.

244
00:19:28,010 --> 00:19:32,525
Ainsi, le point de terminaison ImageUpload me permet de télécharger le fichier.

245
00:19:32,525 --> 00:19:37,880
Donc, ce serait UploadRouter. C'est ça.

246
00:19:37,880 --> 00:19:44,740
Mon application est maintenant configurée pour accepter les téléchargements de fichiers.

247
00:19:44,740 --> 00:19:51,130
Alors, sauvegardons les changements, puis allons jeter un oeil sur le fonctionnement de notre application.

248
00:19:51,130 --> 00:19:53,700
Pour revenir au Terminal,

249
00:19:53,700 --> 00:19:58,310
assurez-vous maintenant que votre serveur MongoDB est opérationnel dans

250
00:19:58,310 --> 00:20:03,020
l'un des onglets Terminal ou dans l'une des commandes Windows.

251
00:20:03,020 --> 00:20:04,640
Dans l'autre fenêtre,

252
00:20:04,640 --> 00:20:09,210
démarrons le serveur.

253
00:20:09,210 --> 00:20:12,455
Une fois que notre serveur est opérationnel,

254
00:20:12,455 --> 00:20:20,120
nous irons à Postman et ensuite envoyer ou plutôt télécharger un fichier de Postman.

255
00:20:20,120 --> 00:20:22,435
Donc, comme je l'ai mentionné,

256
00:20:22,435 --> 00:20:24,090
pour télécharger un fichier,

257
00:20:24,090 --> 00:20:26,920
vous utiliserez le multipart/form-data.

258
00:20:26,920 --> 00:20:29,865
Alors, d'abord, laissez-moi me connecter.

259
00:20:29,865 --> 00:20:33,560
Donc, je vais faire un post sur la connexion des utilisateurs locaux,

260
00:20:33,560 --> 00:20:36,140
et je me connecterai en tant qu'administrateur parce que

261
00:20:36,140 --> 00:20:38,815
seul l'administrateur peut y télécharger leurs fichiers.

262
00:20:38,815 --> 00:20:45,350
Rappelez-vous que votre serveur est maintenant en cours d'exécution sur le port sécurisé.

263
00:20:45,350 --> 00:20:52,580
Donc, nous allons dire https://localhost:3443,

264
00:20:52,580 --> 00:20:56,090
et il n'y a pas d'autorisation ici.

265
00:20:56,090 --> 00:21:03,235
Donc, laissez-moi désactiver l'autorisation ici et ensuite envoyer la requête au serveur.

266
00:21:03,235 --> 00:21:06,005
Donc, dans Postman, si cela se produit,

267
00:21:06,005 --> 00:21:09,790
qu'il dit ne pouvait pas obtenir de réponse,

268
00:21:09,790 --> 00:21:15,025
c'est parce que vous exécutez maintenant le serveur sécurisé.

269
00:21:15,025 --> 00:21:17,095
Donc, dans ce cas,

270
00:21:17,095 --> 00:21:23,170
Postman n'acceptera pas le certificat auto-signé qui arrive.

271
00:21:23,170 --> 00:21:28,790
Donc, dans ce cas, ouvrez les paramètres ici et dans les paramètres,

272
00:21:28,790 --> 00:21:31,360
sous le champ Paramètres généraux,

273
00:21:31,360 --> 00:21:34,765
vous verrez cette vérification de certificat SSL.

274
00:21:34,765 --> 00:21:38,580
Désactivez cette option pour que votre Facteur soit prêt à accepter

275
00:21:38,580 --> 00:21:43,975
le certificat auto-signé que nous avons installé côté serveur.

276
00:21:43,975 --> 00:21:47,450
Donc, c'est ainsi que vous serez en mesure de contacter votre serveur sur

277
00:21:47,450 --> 00:21:53,300
le point de terminaison de connexion utilisateur https://localhost:3443.

278
00:21:53,300 --> 00:21:55,775
Donc, lorsque nous essayons de vous connecter maintenant,

279
00:21:55,775 --> 00:21:59,750
vous verrez maintenant que votre demande de publication a été

280
00:21:59,750 --> 00:22:03,035
acceptée avec succès par le serveur

281
00:22:03,035 --> 00:22:06,275
, puis le serveur répond avec les informations de jeton.

282
00:22:06,275 --> 00:22:12,515
Donc, encore une fois, pour vous assurer que Postman vous permet de contacter le serveur sécurisé,

283
00:22:12,515 --> 00:22:16,264
cliquez sur Paramètres et sous Général,

284
00:22:16,264 --> 00:22:20,645
désactivez la validation du certificat SSL.

285
00:22:20,645 --> 00:22:23,195
Donc, une fois que vous vous

286
00:22:23,195 --> 00:22:25,605
connectez, copions le jeton ici.

287
00:22:25,605 --> 00:22:28,290
Donc, je vais copier le jeton ici.

288
00:22:28,290 --> 00:22:31,000
Maintenant, essayons de télécharger le fichier.

289
00:22:31,000 --> 00:22:34,215
Pour télécharger le fichier, comme vous l'avez remarqué,

290
00:22:34,215 --> 00:22:36,830
nous devons télécharger ce fichier à localhost:3443,

291
00:22:36,830 --> 00:22:46,080
et le point de terminaison est ImageUpload.

292
00:22:47,680 --> 00:22:51,200
Pour faire l'ImageUpload ici,

293
00:22:51,200 --> 00:22:57,360
dans l'en-tête, nous devons configurer l'autorisation.

294
00:22:57,490 --> 00:23:00,560
Donc, nous allons configurer l'autorisation,

295
00:23:00,560 --> 00:23:03,035
puis vous direz,

296
00:23:03,035 --> 00:23:08,820
« Porteur », et fournir le jeton a que nous avons obtenu.

297
00:23:08,820 --> 00:23:14,785
Donc, gardez une copie du jeton quelque part et copiez le jeton dans l'en-tête.

298
00:23:14,785 --> 00:23:18,260
Dans le corps, pour télécharger un fichier,

299
00:23:18,260 --> 00:23:20,030
nous utiliserons ce formulaire de données.

300
00:23:20,030 --> 00:23:24,020
Donc, c'est ce qui vous permet de faire le multipart/form-data ici.

301
00:23:24,020 --> 00:23:26,625
Ainsi, lorsque vous cliquez sur le formulaire de données,

302
00:23:26,625 --> 00:23:32,310
vous pouvez ici fournir le fichier que vous vouliez télécharger.

303
00:23:32,310 --> 00:23:36,040
Ainsi, lorsque vous cliquez sur une nouvelle clé ici,

304
00:23:37,870 --> 00:23:43,040
utilisez cette clé comme ImageFile.

305
00:23:43,040 --> 00:23:52,695
Rappelons que lorsque nous avons configuré la méthode post sur le site UploadRouter,

306
00:23:52,695 --> 00:23:56,515
nous avons spécifié en disant télécharger un fichier ImageFile unique.

307
00:23:56,515 --> 00:23:59,670
Donc, c'est la même clé que vous allez utiliser ici.

308
00:23:59,670 --> 00:24:03,410
Ensuite, lorsque vous donnez la clé,

309
00:24:03,410 --> 00:24:05,270
puis la deuxième partie,

310
00:24:05,270 --> 00:24:09,875
vous allez définir ceci de Texte à Fichier ici.

311
00:24:09,875 --> 00:24:15,595
Donc, c'est ce qui vous permet de spécifier le fichier comme valeur pour cette clé particulière.

312
00:24:15,595 --> 00:24:20,045
Donc, alors vous verrez ce bouton à venir disant, « Choisir les fichiers ».

313
00:24:20,045 --> 00:24:25,505
Ainsi, vous pouvez l'ouvrir, puis sélectionner un fichier que vous souhaitez télécharger.

314
00:24:25,505 --> 00:24:30,060
Donc, ici, je vais aller à mon,

315
00:24:30,160 --> 00:24:37,470
j'ai un fichier dans un de mes dossiers ici.

316
00:24:37,470 --> 00:24:41,685
Donc, je vais juste aller dans les images d'actifs,

317
00:24:41,685 --> 00:24:46,640
et ensuite nous allons juste télécharger un fichier PNG à partir d'ici.

318
00:24:46,640 --> 00:24:48,230
Donc, vous pouvez dire,

319
00:24:48,230 --> 00:24:50,280
« Télécharger le fichier spécifique. »

320
00:24:50,280 --> 00:24:52,100
Donc, comme vous vous en souvenez,

321
00:24:52,100 --> 00:24:56,020
nous avons configuré notre serveur pour accepter uniquement ImageFile.

322
00:24:56,020 --> 00:24:58,720
Donc, nous allons dire, « Téléchargez ce fichier particulier ».

323
00:24:58,720 --> 00:25:03,050
Ensuite, lorsque vous cliquez sur le bouton Envoyer,

324
00:25:03,050 --> 00:25:04,940
alors remarquez que dans le corps,

325
00:25:04,940 --> 00:25:07,145
vous devez configurer cela avec form-data.

326
00:25:07,145 --> 00:25:11,240
Ainsi, le multipart/form-data, puis la clé est l'ImageFile,

327
00:25:11,240 --> 00:25:15,440
et la valeur est le fichier que vous venez de sélectionner,

328
00:25:15,440 --> 00:25:17,575
puis cliquez sur le bouton Envoyer.

329
00:25:17,575 --> 00:25:19,940
Ainsi, lorsque vous cliquez sur le bouton Envoyer,

330
00:25:19,940 --> 00:25:23,670
le fichier sera téléchargé sur votre serveur

331
00:25:23,670 --> 00:25:27,770
, puis le serveur répondra avec cet objet.

332
00:25:27,770 --> 00:25:29,770
Donc, c'est ce qui est contenu dans l'

333
00:25:29,770 --> 00:25:34,820
objet req.file qui est là sur l'objet request ici.

334
00:25:34,820 --> 00:25:38,250
Donc, ce fichier req.file, comme vous le voyez, contient un nom de champ. Le

335
00:25:38,250 --> 00:25:39,590
nom de champ est ImageFile.

336
00:25:39,590 --> 00:25:43,200
Donc, notez que c'est exactement le même que celui-ci ici.

337
00:25:43,200 --> 00:25:50,290
Le nom d'origine, donc notez que l'expression originalname contient alberto.png,

338
00:25:50,290 --> 00:25:52,915
qui est le fichier que j'ai téléchargé.

339
00:25:52,915 --> 00:25:56,250
Maintenant, vous pouvez voir pourquoi lorsque j'ai configuré

340
00:25:56,250 --> 00:26:00,905
le stockage et le nom de fichier, j'ai défini file.originalname.

341
00:26:00,905 --> 00:26:03,515
Donc, c'est ce qui va être utilisé là-bas.

342
00:26:03,515 --> 00:26:05,410
Vous pouvez voir le type d'encodage,

343
00:26:05,410 --> 00:26:08,745
le type MIME, et la destination, le

344
00:26:08,745 --> 00:26:10,995
dossier dans lequel le fichier a été placé,

345
00:26:10,995 --> 00:26:13,060
ainsi que le chemin réel du fichier ici,

346
00:26:13,060 --> 00:26:18,240
le chemin relatif à partir de la racine du dossier du serveur ici.

347
00:26:18,240 --> 00:26:23,555
Donc, ce chemin indique où le fichier est accessible côté serveur.

348
00:26:23,555 --> 00:26:29,865
Ainsi, si vous configurez les détails d'un plat ou d'un leader, par exemple,

349
00:26:29,865 --> 00:26:37,490
vous utiliseriez simplement la propriété image du leader à images/alberto.png.

350
00:26:37,490 --> 00:26:40,390
Public ne doit pas être utilisé de toute façon car

351
00:26:40,390 --> 00:26:43,420
le dossier public est celui qui agit comme le dossier racine de notre serveur.

352
00:26:43,420 --> 00:26:46,560
Donc, vous avez juste besoin de fournir ces images.alberto.

353
00:26:46,560 --> 00:26:49,475
Ainsi, à partir de ce chemin que vous obtenez,

354
00:26:49,475 --> 00:26:52,685
une fois le fichier téléchargé avec succès,

355
00:26:52,685 --> 00:26:58,130
extrayez cette partie, puis utilisez-le pour l'image dans

356
00:26:58,130 --> 00:27:04,265
votre document JSON qui décrit le leader spécifique.

357
00:27:04,265 --> 00:27:09,260
Donc, c'est comme ça que nous téléchargeons un fichier.

358
00:27:09,260 --> 00:27:11,985
Maintenant, pour vous convaincre que l'amende a été téléchargée,

359
00:27:11,985 --> 00:27:14,375
passons à notre projet.

360
00:27:14,375 --> 00:27:16,655
Aller à notre projet,

361
00:27:16,655 --> 00:27:22,215
dans le dossier public,

362
00:27:22,215 --> 00:27:26,325
vous pouvez maintenant voir qu'il y a un sous-dossier images là-bas.

363
00:27:26,325 --> 00:27:28,120
Dans le sous-dossier images,

364
00:27:28,120 --> 00:27:32,785
vous pouvez voir le fichier alberta.png téléchargé là-bas.

365
00:27:32,785 --> 00:27:37,635
Maintenant, nous pouvons télécharger plus de fichiers ImageFiles sur notre côté serveur.

366
00:27:37,635 --> 00:27:40,425
Maintenant, si vous essayez de télécharger un fichier non-ImageFile,

367
00:27:40,425 --> 00:27:42,980
vous verrez que le serveur n'acceptera pas

368
00:27:42,980 --> 00:27:46,660
un fichier non-ImageFile et répondra ensuite en disant :

369
00:27:46,660 --> 00:27:49,180
« Impossible d'accepter le fichier non-ImageFile ».

370
00:27:49,180 --> 00:27:54,050
C' est ainsi que nous allons configurer notre serveur express

371
00:27:54,050 --> 00:27:59,390
pour accepter les téléchargements d'ImageFiles depuis notre côté client.

372
00:27:59,390 --> 00:28:03,065
Avec cela, nous complétons cet exercice.

373
00:28:03,065 --> 00:28:05,400
Dans cet exercice, nous avons vu comment nous utilisons

374
00:28:05,400 --> 00:28:09,840
le méta module pour configurer notre serveur express pour

375
00:28:09,840 --> 00:28:17,735
accepter les téléchargements de fichiers sur un point de terminaison /imageUpload Rest API.

376
00:28:17,735 --> 00:28:19,840
Lorsque nous publions sur le point de terminaison,

377
00:28:19,840 --> 00:28:25,585
le fichier est téléchargé dans un dossier spécifié sur le site du serveur.

378
00:28:25,585 --> 00:28:27,900
Avec cela, nous complétons cet exercice.

379
00:28:27,900 --> 00:28:34,890
C' est le bon moment pour vous de faire un commit git avec le message 'file upload'.