1
00:00:01,210 --> 00:00:04,730
‫Jonas : Dans cette deuxième partie du téléchargement des images de la

2
00:00:04,730 --> 00:00:06,943
‫tournée, nous allons maintenant toutes les traiter.

3
00:00:08,670 --> 00:00:10,300
‫Mais avant de commencer,

4
00:00:10,300 --> 00:00:12,330
‫il y a en fait quelque chose

5
00:00:12,330 --> 00:00:14,500
‫que je dois corriger dans le contrôleur utilisateur.

6
00:00:14,500 --> 00:00:18,530
‫Et donc en fait dans ce resizeUserPhoto, et

7
00:00:18,530 --> 00:00:21,110
‫c'est que nous devons

8
00:00:21,110 --> 00:00:25,210
‫en fait attendre toute cette opération ici, d'accord ?

9
00:00:25,210 --> 00:00:28,940
‫Donc, tout cela ici retournera en fait une promesse, et cela a

10
00:00:28,940 --> 00:00:30,640
‫du sens, n'est-ce pas, parce

11
00:00:30,640 --> 00:00:33,950
‫que toutes ces opérations ici, elles prennent un certain temps, et

12
00:00:33,950 --> 00:00:36,460
‫donc bien sûr elles se produisent en arrière-plan.

13
00:00:36,460 --> 00:00:38,390
‫Ce sont donc du code asynchrone,

14
00:00:38,390 --> 00:00:41,850
‫et donc évidemment ils ne doivent pas bloquer la boucle d'événement.

15
00:00:41,850 --> 00:00:43,940
‫Maintenant, le problème ici est

16
00:00:43,940 --> 00:00:46,260
‫qu'en ce moment nous appelons cette fonction

17
00:00:46,260 --> 00:00:49,030
‫suivante ici, donc le prochain middleware, sans réellement

18
00:00:49,030 --> 00:00:51,330
‫attendre que ces opérations ici se terminent.

19
00:00:51,330 --> 00:00:53,380
‫Et ce n'est pas une bonne idée.

20
00:00:53,380 --> 00:00:55,653
‫Et donc utilisons simplement

21
00:00:56,800 --> 00:01:01,483
‫wait ici, puis bien sûr async, et tout ça.

22
00:01:02,520 --> 00:01:04,483
‫Alors catchAsync ici.

23
00:01:07,110 --> 00:01:11,020
‫Très bien, faites une sauvegarde, et c'est bien mieux.

24
00:01:11,020 --> 00:01:12,930
‫Et maintenant, nous allons faire quelque

25
00:01:12,930 --> 00:01:15,580
‫chose de très similaire avec nos images de tournée.

26
00:01:15,580 --> 00:01:18,150
‫Et donc en fait, permettez-moi d'aller de l'avant et de copier ceci.

27
00:01:20,850 --> 00:01:22,540
‫D'accord, et même si ce

28
00:01:22,540 --> 00:01:26,923
‫ne sera pas exactement la même chose, c'est bien de l'avoir déjà ici.

29
00:01:28,760 --> 00:01:31,113
‫Donc celui-ci sera également une fonction asynchrone.

30
00:01:36,440 --> 00:01:39,320
‫Très bien, maintenant comme avant, au cas où

31
00:01:39,320 --> 00:01:41,740
‫il n'y aurait pas d'images téléchargées,

32
00:01:41,740 --> 00:01:44,390
‫alors nous voulons passer directement au middleware suivant.

33
00:01:45,770 --> 00:01:50,290
‫Donc s'il n'y a pas de demande. fichiers, et en fait, je vais

34
00:01:50,290 --> 00:01:52,620
‫aller plus loin, en exigeant qu'il y

35
00:01:52,620 --> 00:01:55,300
‫ait à la fois la couverture de l'image

36
00:01:55,300 --> 00:01:56,690
‫et des images.

37
00:01:56,690 --> 00:01:59,450
‫Et donc, en gros, nous voulons passer au middleware suivant au cas où il

38
00:01:59,450 --> 00:02:02,663
‫n'y aurait pas de demande. des dossiers. imageCover,

39
00:02:06,150 --> 00:02:11,150
‫ou pas de demande. des dossiers. images.

40
00:02:15,240 --> 00:02:18,463
‫Alors dans ce cas, la suite.

41
00:02:20,840 --> 00:02:24,003
‫D'accord, et maintenant commençons par traiter l'image

42
00:02:26,860 --> 00:02:31,420
‫de couverture, puis ensuite toutes les autres images en boucle,

43
00:02:31,420 --> 00:02:32,623
‫en gros.

44
00:02:34,220 --> 00:02:36,170
‫Donc d'autres images.

45
00:02:36,170 --> 00:02:39,550
‫Maintenant, où obtenons-nous réellement l'image de couverture ?

46
00:02:39,550 --> 00:02:44,460
‫Eh bien, rappelez-vous comment j'ai dit que c'est à la demande. des dossiers?

47
00:02:44,460 --> 00:02:47,403
‫Ne plus déposer, puis . coverImage, ou

48
00:02:49,080 --> 00:02:50,610
‫en fait imageCover.

49
00:02:50,610 --> 00:02:52,653
‫Et puis rappelez-vous comment c'était un tableau?

50
00:02:53,610 --> 00:02:56,113
‫Jetons donc un coup d'œil à cela une fois de plus.

51
00:02:58,850 --> 00:03:02,170
‫D'accord, donc tout cela est une demande. fichiers, puis

52
00:03:02,170 --> 00:03:05,161
‫à partir de là, nous prenons imageCover,

53
00:03:05,161 --> 00:03:07,950
‫et c'est un tableau d'un élément.

54
00:03:07,950 --> 00:03:11,710
‫Et maintenant, nous voulons le numéro d'élément zéro,

55
00:03:11,710 --> 00:03:13,780
‫puis . amortir.

56
00:03:13,780 --> 00:03:17,120
‫Donc, cette chose étrange ici.

57
00:03:17,120 --> 00:03:20,750
‫Ensuite, nous voulons le redimensionner à un rapport de

58
00:03:20,750 --> 00:03:23,710
‫2/3, et la largeur sera de

59
00:03:23,710 --> 00:03:28,090
‫2 000 pixels et la hauteur de 1 333, d'accord ?

60
00:03:28,090 --> 00:03:31,380
‫Et encore une fois, c'est un joli rapport 3/2, ce

61
00:03:31,380 --> 00:03:33,750
‫qui est très courant dans les images.

62
00:03:33,750 --> 00:03:38,687
‫Ensuite, nous souhaitons également le formater au format JPEG avec une qualité de 90 %,

63
00:03:38,687 --> 00:03:40,820
‫puis l'enregistrer en tant que fichier.

64
00:03:40,820 --> 00:03:43,763
‫Mais cette fois, il s'agit d'image/tours, et

65
00:03:45,828 --> 00:03:49,230
‫ici, définissons en fait notre nom de fichier séparément.

66
00:03:50,890 --> 00:03:54,480
‫D'accord, parce que nous en aurons encore besoin.

67
00:03:54,480 --> 00:03:56,557
‫Donc imageCoverFilename, et une fois

68
00:04:00,330 --> 00:04:04,110
‫de plus, nous devons maintenant créer un nom de fichier unique.

69
00:04:04,110 --> 00:04:08,070
‫Alors maintenant, c'est la tournée, puis mettons à nouveau l'ID

70
00:04:08,070 --> 00:04:12,380
‫de la tournée ici, là où avant c'était l'ID de l'utilisateur.

71
00:04:12,380 --> 00:04:16,010
‫Et c'est donc à la demande. params, alors n'oubliez pas

72
00:04:16,010 --> 00:04:17,770
‫que cet itinéraire contiendra

73
00:04:17,770 --> 00:04:20,140
‫toujours l'ID du tour, et donc

74
00:04:20,140 --> 00:04:24,393
‫c'est sur demande. paramètres. identifiant.

75
00:04:26,290 --> 00:04:31,290
‫Puis à nouveau l'horodatage, Date. maintenant, et disons que

76
00:04:33,810 --> 00:04:38,060
‫celle-ci est l'image de couverture, d'accord ?

77
00:04:38,060 --> 00:04:40,720
‫Et les autres obtiendront alors des chiffres.

78
00:04:40,720 --> 00:04:44,843
‫Et puis bien sûr. jpeg, et utilisons-le donc ici.

79
00:04:45,890 --> 00:04:47,807
‫Donc imageCoverFilename.

80
00:04:49,130 --> 00:04:52,100
‫D'accord, et maintenant, comme dernière étape, nous devons en fait

81
00:04:52,100 --> 00:04:53,720
‫permettre à notre gestionnaire de

82
00:04:53,720 --> 00:04:55,660
‫tournée de mise à jour de

83
00:04:55,660 --> 00:04:59,230
‫récupérer ce nom de fichier de couverture d'image pour le mettre à

84
00:04:59,230 --> 00:05:01,680
‫jour dans le document de tournée actuel, d'accord ?

85
00:05:01,680 --> 00:05:03,290
‫Voyons donc rapidement

86
00:05:03,290 --> 00:05:06,830
‫comment le document est réellement mis à jour.

87
00:05:06,830 --> 00:05:08,780
‫Et donc nous utilisons

88
00:05:08,780 --> 00:05:11,290
‫très simplement cette fonction d'usine updateOne.

89
00:05:11,290 --> 00:05:14,430
‫Et celui-ci mettra simplement à jour toutes les données

90
00:05:14,430 --> 00:05:17,163
‫contenues dans le corps du nouveau document.

91
00:05:18,460 --> 00:05:21,670
‫Alors juste pour vous le prouver ici.

92
00:05:21,670 --> 00:05:26,670
‫Donc updateOne, il prend en charge l'intégralité de la demande. corps, d'accord ?

93
00:05:26,730 --> 00:05:29,920
‫Et maintenant, le secret est de mettre ce nom de

94
00:05:29,920 --> 00:05:34,313
‫fichier de couverture d'image sur demande. corps, d'accord ?

95
00:05:36,720 --> 00:05:39,760
‫Alors demande. corps. Image de couverture.

96
00:05:41,840 --> 00:05:45,270
‫Oh et encore, ça s'appelle imageCover à la

97
00:05:45,270 --> 00:05:49,850
‫place, devrait être égal à imageCoverFilename, d'accord, ça a du sens ?

98
00:05:52,350 --> 00:05:54,350
‫Et bien sûr, il s'appelle imageCover

99
00:05:54,350 --> 00:05:57,710
‫car c'est le nom que nous avons dans notre définition de schéma.

100
00:05:57,710 --> 00:05:59,730
‫Et alors, quand il fera la mise

101
00:05:59,730 --> 00:06:02,280
‫à jour, il fera correspondre ce champ dans le corps

102
00:06:02,280 --> 00:06:04,530
‫avec le champ dans notre base de données.

103
00:06:04,530 --> 00:06:06,920
‫Et en fait, nous pouvons refactoriser cela

104
00:06:06,920 --> 00:06:10,950
‫un peu car nous n'avons pas vraiment besoin de ce nom de variable ici.

105
00:06:10,950 --> 00:06:15,113
‫Nous pourrions donc simplement mettre ce nom de fichier ici directement sur le corps.

106
00:06:16,040 --> 00:06:20,260
‫Alors mettez-le ici, puis utilisez-le ici tout de suite.

107
00:06:20,260 --> 00:06:23,390
‫Nous n'avons donc pas du tout besoin de cette ligne de code.

108
00:06:23,390 --> 00:06:27,430
‫Super, et maintenant avant de passer aux autres images, testons-le avec

109
00:06:27,430 --> 00:06:29,940
‫ce que nous avons déjà à

110
00:06:29,940 --> 00:06:30,903
‫ce stade.

111
00:06:31,980 --> 00:06:35,080
‫Alors débarrassons-nous simplement de cette console. log, et donc

112
00:06:35,080 --> 00:06:37,170
‫quand nous faisons maintenant la demande,

113
00:06:37,170 --> 00:06:40,100
‫alors notre image de couverture devrait déjà être téléchargée

114
00:06:40,100 --> 00:06:43,950
‫et être placée dans le document de la tournée, d'accord ?

115
00:06:43,950 --> 00:06:46,870
‫Donc, ces trois autres images ici bien sûr non, mais au

116
00:06:46,870 --> 00:06:48,300
‫moins la couverture de l'image

117
00:06:48,300 --> 00:06:50,183
‫devrait maintenant fonctionner à ce stade, du

118
00:06:51,340 --> 00:06:53,253
‫moins si nous avons tout fait correctement.

119
00:06:54,410 --> 00:06:56,863
‫Voyons donc si c'est quelque part ici, et

120
00:06:57,760 --> 00:06:59,963
‫les images sont toujours vides évidemment.

121
00:07:00,970 --> 00:07:05,970
‫Mais je cherche maintenant l'image de couverture, alors où est-elle ?

122
00:07:06,640 --> 00:07:09,280
‫Et voilà, donc imageCover, et ça ressemble

123
00:07:09,280 --> 00:07:11,843
‫beaucoup au nom de fichier que

124
00:07:11,843 --> 00:07:13,970
‫nous venons de spécifier.

125
00:07:13,970 --> 00:07:18,970
‫Et essayons en fait de recharger notre page de toutes les tournées ici, et peut-être

126
00:07:21,130 --> 00:07:23,550
‫que notre nouvelle tournée est déjà là.

127
00:07:23,550 --> 00:07:28,430
‫Ah, c'est parti, c'est donc le nouveau tour de VTT.

128
00:07:28,430 --> 00:07:32,180
‫Et voici bien l'image que nous venons de mettre en ligne.

129
00:07:32,180 --> 00:07:34,090
‫Si beau.

130
00:07:34,090 --> 00:07:36,300
‫Maintenant, si nous essayons d'ouvrir

131
00:07:36,300 --> 00:07:40,870
‫cette page, alors les autres images ne sont pas là, d'accord ?

132
00:07:40,870 --> 00:07:42,780
‫Donc, ils sont introuvables, et

133
00:07:42,780 --> 00:07:45,513
‫bien sûr, c'est ce que nous allons faire ensuite.

134
00:07:47,520 --> 00:07:48,353
‫Très bien.

135
00:07:50,340 --> 00:07:52,820
‫N'oubliez donc pas que nos

136
00:07:52,820 --> 00:07:55,700
‫images ici sont également un tableau,

137
00:07:55,700 --> 00:07:59,360
‫qui contient ensuite tous ces nouveaux téléchargements de fichiers.

138
00:07:59,360 --> 00:08:01,500
‫Et donc, utilisons maintenant une boucle

139
00:08:01,500 --> 00:08:03,833
‫pour traiter chacun d'eux en une seule itération.

140
00:08:04,900 --> 00:08:09,700
‫Alors demande. des dossiers. images. pour chaque.

141
00:08:14,330 --> 00:08:15,810
‫Et puis notre fonction

142
00:08:15,810 --> 00:08:18,823
‫de rappel dans laquelle nous avons accès au fichier actuel.

143
00:08:21,200 --> 00:08:23,780
‫Très bien, maintenant, nous devons créer le

144
00:08:23,780 --> 00:08:26,560
‫nom de fichier actuel, et vous verrez pourquoi

145
00:08:26,560 --> 00:08:28,210
‫dans une seconde.

146
00:08:29,550 --> 00:08:33,850
‫Donc, le nom du fichier est égal, puis quelque chose de très similaire à celui-ci.

147
00:08:35,758 --> 00:08:38,160
‫Avec la différence que maintenant ce n'est pas une

148
00:08:38,160 --> 00:08:41,230
‫couverture, mais à la place nous voulons les appeler un, deux et trois.

149
00:08:41,230 --> 00:08:43,040
‫Et donc, dans notre

150
00:08:43,040 --> 00:08:47,173
‫fonction de rappel, nous avons également accès à l'index actuel, d'accord ?

151
00:08:48,920 --> 00:08:53,920
‫Nous avons donc besoin du fichier, et moi de l'index.

152
00:08:54,220 --> 00:08:57,923
‫Et donc ici il ne s'agit pas de couverture, mais d'indice plus un.

153
00:09:00,330 --> 00:09:04,240
‫Donc plus un, et c'est juste parce

154
00:09:04,240 --> 00:09:09,010
‫que cet indice est basé sur zéro, d'accord ?

155
00:09:09,010 --> 00:09:11,693
‫Vient ensuite l'étape de traitement elle-même, qui est

156
00:09:13,060 --> 00:09:15,603
‫à nouveau très similaire à celle-ci.

157
00:09:17,400 --> 00:09:21,873
‫Et maintenant, nous devons bien sûr également marquer cela comme asynchrone.

158
00:09:23,660 --> 00:09:27,083
‫Très bien, et ici c'est maintenant le nom du fichier.

159
00:09:29,360 --> 00:09:33,570
‫D'accord, maintenant pourquoi avons-nous réellement besoin de ce nom de fichier ?

160
00:09:33,570 --> 00:09:37,250
‫Eh bien, nous en avons besoin car nous devons maintenant pousser ce nom

161
00:09:37,250 --> 00:09:42,250
‫de fichier dans la requête. corps. images, et c'est donc exactement la même logique que

162
00:09:42,280 --> 00:09:45,913
‫nous avions ici avant sur demande. corps. imageCouverture.

163
00:09:47,040 --> 00:09:49,020
‫Alors n'oubliez pas que dans

164
00:09:49,020 --> 00:09:52,870
‫notre collection, demandez. corps. images est en fait un tableau.

165
00:09:52,870 --> 00:09:55,610
‫Et maintenant, nous devons créer ce tableau et le démarrer

166
00:09:55,610 --> 00:09:57,343
‫en tant que tableau vide.

167
00:09:58,400 --> 00:10:01,430
‫Alors demande. corps. images sous

168
00:10:03,870 --> 00:10:07,150
‫forme de tableau vide, puis à chaque itération,

169
00:10:07,150 --> 00:10:09,720
‫nous pousserons le nom de fichier

170
00:10:09,720 --> 00:10:11,770
‫actuel vers ce tableau d'images.

171
00:10:11,770 --> 00:10:15,070
‫Alors demande. corps. images. push,

172
00:10:19,580 --> 00:10:23,370
‫le nom du fichier, d'accord ?

173
00:10:23,370 --> 00:10:25,100
‫Et avec cela, nous avons presque terminé.

174
00:10:25,100 --> 00:10:27,020
‫Il y a juste un petit

175
00:10:27,020 --> 00:10:28,530
‫problème, qui est le fait

176
00:10:28,530 --> 00:10:31,710
‫que nous n'utilisons pas correctement l'attente asynchrone ici dans ce cas,

177
00:10:31,710 --> 00:10:33,200
‫donc dans cette boucle.

178
00:10:33,200 --> 00:10:35,560
‫Et c'est parce que cette attente asynchrone

179
00:10:35,560 --> 00:10:38,450
‫ici n'est qu'à l'intérieur de cette fonction de

180
00:10:38,450 --> 00:10:40,550
‫rappel de la boucle foreach.

181
00:10:40,550 --> 00:10:42,880
‫Et donc cela n'empêchera pas le

182
00:10:42,880 --> 00:10:46,300
‫code de se déplacer juste à côté de cette ligne

183
00:10:46,300 --> 00:10:49,390
‫où nous appelons ensuite le prochain middleware, d'accord ?

184
00:10:49,390 --> 00:10:52,510
‫Donc, encore une fois, pour le moment, nous n'attendons en fait

185
00:10:52,510 --> 00:10:55,940
‫rien de tout cela ici, encore une fois, car cette attente asynchrone se

186
00:10:55,940 --> 00:10:58,000
‫produit à l'intérieur de la fonction

187
00:10:58,000 --> 00:11:00,440
‫de rappel de l'une de ces méthodes de boucle.

188
00:11:00,440 --> 00:11:03,310
‫Et nous avons déjà rencontré ce genre de

189
00:11:03,310 --> 00:11:06,040
‫problème auparavant, mais il existe heureusement une solution

190
00:11:06,040 --> 00:11:08,970
‫pour cela, car puisqu'il s'agit d'une fonction asynchrone

191
00:11:08,970 --> 00:11:11,470
‫ici, elle renverra une nouvelle promesse.

192
00:11:11,470 --> 00:11:13,610
‫Et donc, si nous créons une

193
00:11:13,610 --> 00:11:17,210
‫carte, nous pouvons alors enregistrer un tableau de toutes ces promesses.

194
00:11:17,210 --> 00:11:18,910
‫Et puis si nous avons un

195
00:11:18,910 --> 00:11:22,190
‫tableau, nous pouvons utiliser promise. tous pour les attendre tous.

196
00:11:22,190 --> 00:11:24,530
‫Et donc avec cela, nous attendrons alors jusqu'à

197
00:11:24,530 --> 00:11:27,000
‫ce que tout ce code, et dans ce

198
00:11:27,000 --> 00:11:29,340
‫cas, jusqu'à ce que tout ce traitement

199
00:11:29,340 --> 00:11:32,180
‫d'image soit terminé, et ensuite seulement passer à la ligne

200
00:11:32,180 --> 00:11:34,290
‫suivante, qui appelle le prochain middleware

201
00:11:34,290 --> 00:11:37,000
‫pour vraiment mettre à jour les documents de tournée.

202
00:11:37,000 --> 00:11:38,960
‫Et si on ne faisait pas

203
00:11:38,960 --> 00:11:41,020
‫ça dans ce cas, ça ne

204
00:11:41,020 --> 00:11:44,090
‫fonctionnerait vraiment pas du tout, car sans ça pousse

205
00:11:44,090 --> 00:11:48,260
‫ici, la demande. corps. les images seraient toujours vides

206
00:11:48,260 --> 00:11:49,460
‫lors de l'appel suivant.

207
00:11:49,460 --> 00:11:51,880
‫Et donc, aucun de ces noms

208
00:11:51,880 --> 00:11:55,260
‫d'image ne serait alors conservé dans le document, d'accord ?

209
00:11:55,260 --> 00:11:57,630
‫Alors utilisons maintenant la promesse. all, et

210
00:11:57,630 --> 00:12:02,250
‫en fait, je n'enregistre même pas ce tableau ici dans une

211
00:12:02,250 --> 00:12:06,340
‫variable, j'utiliserai plutôt promise. tout de suite

212
00:12:06,340 --> 00:12:07,913
‫là-dessus.

213
00:12:09,030 --> 00:12:14,030
‫Attendez donc Promesse. tout sur le tableau

214
00:12:15,010 --> 00:12:17,963
‫qui en revient, d'accord ?

215
00:12:19,870 --> 00:12:21,906
‫J'espère donc que cela a du sens.

216
00:12:21,906 --> 00:12:25,093
‫Alors maintenant, enregistrons le corps ici sur la console.

217
00:12:28,390 --> 00:12:32,190
‫D'accord, et avec ça, nous devrions maintenant être prêts

218
00:12:32,190 --> 00:12:35,560
‫à télécharger toutes nos images, d'accord ?

219
00:12:35,560 --> 00:12:40,560
‫Descendons ici et réessayez.

220
00:12:44,290 --> 00:12:46,903
‫D'accord, alors où est notre tableau d'images ?

221
00:12:54,440 --> 00:12:57,800
‫Eh bien, peut-être que c'était quelque part ici, ah, le voici.

222
00:12:57,800 --> 00:12:59,660
‫Donc j'ai raté ça d'une manière ou d'une autre.

223
00:12:59,660 --> 00:13:03,300
‫Et cela semble très prometteur, non?

224
00:13:03,300 --> 00:13:05,730
‫Alors trois belles images,

225
00:13:05,730 --> 00:13:08,693
‫regardons maintenant ici notre page.

226
00:13:10,910 --> 00:13:15,910
‫Ah, ils sont là, mais pas tout à fait corrects, non ?

227
00:13:15,980 --> 00:13:18,540
‫Il semble donc que nous ayons simplement

228
00:13:18,540 --> 00:13:20,943
‫téléchargé l'image de couverture trois fois.

229
00:13:22,050 --> 00:13:24,710
‫Jetons donc un coup d'œil à Postman, mais les noms

230
00:13:24,710 --> 00:13:26,840
‫des images sont en fait corrects, et il

231
00:13:26,840 --> 00:13:29,963
‫y a donc quelque chose qui ne va pas dans notre traitement là-bas.

232
00:13:32,470 --> 00:13:37,050
‫Jetons également un œil aux demandes. corps, oh, et j'ai oublié

233
00:13:37,050 --> 00:13:39,243
‫de le mettre ici.

234
00:13:41,820 --> 00:13:44,220
‫D'accord, mais je pense que ce n'est même pas nécessaire car

235
00:13:44,220 --> 00:13:45,700
‫nous venons de voir dans Postman

236
00:13:45,700 --> 00:13:47,763
‫que les noms de fichiers sont en fait corrects.

237
00:13:48,630 --> 00:13:50,630
‫Nous n'avons donc plus besoin de celui-ci.

238
00:13:50,630 --> 00:13:53,150
‫Jetons maintenant un coup d'œil aux noms

239
00:13:53,150 --> 00:13:58,150
‫de fichiers que nous venons de télécharger, donc c'est en public et en tournée.

240
00:14:00,570 --> 00:14:01,673
‫Et donc les voici.

241
00:14:04,120 --> 00:14:07,763
‫C'était donc probablement le premier du dernier test.

242
00:14:10,980 --> 00:14:13,860
‫Et comme vous le voyez, ils sont tous, en

243
00:14:13,860 --> 00:14:15,920
‫effet, exactement la même image.

244
00:14:15,920 --> 00:14:20,720
‫Donc la couverture, une, deux et trois sont les mêmes images,

245
00:14:20,720 --> 00:14:23,760
‫et ce n'est donc pas correct.

246
00:14:23,760 --> 00:14:27,500
‫Et je peux voir en fait tout de suite quel est le problème.

247
00:14:27,500 --> 00:14:30,980
‫Donc, vous voyez que nous lisons, toujours, la

248
00:14:30,980 --> 00:14:33,950
‫demande. des dossiers. imageCover, et

249
00:14:33,950 --> 00:14:37,533
‫non le fichier de l'itération actuelle de cette boucle.

250
00:14:39,090 --> 00:14:43,107
‫D'accord, à la place, cela devrait être un fichier. amortir.

251
00:14:45,930 --> 00:14:48,210
‫Très bien, alors allons-y et

252
00:14:48,210 --> 00:14:50,073
‫supprimons tout cela.

253
00:14:54,440 --> 00:14:57,253
‫Très bien, et réessayez simplement maintenant.

254
00:14:59,490 --> 00:15:00,653
‫Alors envoyons ça.

255
00:15:03,220 --> 00:15:05,633
‫Les noms semblent toujours corrects,

256
00:15:06,810 --> 00:15:10,310
‫mais maintenant, lorsque nous rechargerons cela, voyons voir.

257
00:15:10,310 --> 00:15:12,680
‫Ah, ça a l'air correct.

258
00:15:12,680 --> 00:15:14,260
‫Beau, beau.

259
00:15:14,260 --> 00:15:17,120
‫Vous voyez que les images sont toutes bien formatées,

260
00:15:17,120 --> 00:15:19,480
‫même celle-ci qui était, rappelez-vous, en portrait

261
00:15:19,480 --> 00:15:21,720
‫et même pas en paysage, mais

262
00:15:21,720 --> 00:15:24,913
‫nous avons essentiellement recadré cela et c'est toujours aussi beau.

263
00:15:26,300 --> 00:15:29,473
‫D'accord, nous pouvons maintenant confirmer cela, de sorte

264
00:15:31,000 --> 00:15:34,993
‫que c'est en fait dans les 2 000 par 1 333 pixels.

265
00:15:37,220 --> 00:15:40,880
‫D'accord, c'est encore un peu gros ici, alors peut-être que

266
00:15:40,880 --> 00:15:44,360
‫nous pourrions réduire un peu plus la qualité, mais ce

267
00:15:44,360 --> 00:15:46,280
‫n'est pas vraiment important.

268
00:15:46,280 --> 00:15:47,943
‫Ce qui compte vraiment ici,

269
00:15:47,943 --> 00:15:51,350
‫c'est que la logique que nous venons d'appliquer ici fonctionne vraiment.

270
00:15:51,350 --> 00:15:55,233
‫Alors juste pour récapituler rapidement ce que nous avons fait dans ces deux conférences.

271
00:15:56,820 --> 00:16:00,920
‫Nous avons donc créé un multer upload en utilisant la mémoire de stockage

272
00:16:00,920 --> 00:16:03,183
‫et ce filtre uniquement pour les images.

273
00:16:04,330 --> 00:16:07,370
‫Ensuite, nous avons créé le middleware d'image de tournée

274
00:16:07,370 --> 00:16:11,490
‫de téléchargement en utilisant upload. champs, qui comprend une

275
00:16:11,490 --> 00:16:14,570
‫couverture d'image et trois images, puis sur la

276
00:16:14,570 --> 00:16:19,020
‫demande, il mettra la propriété de fichiers comme celle-ci, d'accord ?

277
00:16:19,020 --> 00:16:22,600
‫Ensuite, dans notre prochain middleware, nous redimensionnons ces images,

278
00:16:22,600 --> 00:16:24,170
‫et d'abord l'image

279
00:16:24,170 --> 00:16:27,090
‫de couverture, puis les trois images restantes.

280
00:16:27,090 --> 00:16:28,930
‫Et ce qui est vraiment important à noter ici,

281
00:16:28,930 --> 00:16:33,380
‫c'est comment nous mettons les noms de fichiers d'images sur demande. corps.

282
00:16:33,380 --> 00:16:35,620
‫Et nous faisons cela pour que dans le

283
00:16:35,620 --> 00:16:37,570
‫prochain middleware, qui est le gestionnaire

284
00:16:37,570 --> 00:16:40,230
‫de route réel, il place ensuite ces données sur le

285
00:16:40,230 --> 00:16:42,620
‫nouveau document lorsqu'il le met à jour, d'accord ?

286
00:16:42,620 --> 00:16:44,700
‫Nous faisons donc cela avec la couverture de

287
00:16:44,700 --> 00:16:46,940
‫l'image, et nous le faisons également avec les images restantes

288
00:16:46,940 --> 00:16:50,120
‫en la poussant dans le corps. images, qui, comme

289
00:16:50,120 --> 00:16:52,510
‫nous le savons grâce à notre schéma

290
00:16:52,510 --> 00:16:54,920
‫de visite, attend un tableau de chaînes.

291
00:16:54,920 --> 00:16:57,290
‫Et donc dans ce cas, les noms de fichiers.

292
00:16:57,290 --> 00:16:58,980
‫Donc à propos de ces autres images,

293
00:16:58,980 --> 00:17:03,490
‫nous les avions sur demande. des dossiers. images, c'est donc un

294
00:17:03,490 --> 00:17:07,150
‫tableau, et donc bien sûr, nous le parcourons en utilisant map.

295
00:17:07,150 --> 00:17:10,130
‫Et nous utilisons map afin que nous puissions essentiellement

296
00:17:10,130 --> 00:17:12,680
‫enregistrer les trois promesses qui sont le

297
00:17:12,680 --> 00:17:15,710
‫résultat de ces trois fonctions asynchrones ici, afin que

298
00:17:15,710 --> 00:17:17,920
‫nous puissions ensuite les attendre toutes ici

299
00:17:17,920 --> 00:17:20,860
‫en utilisant Promise. tout va bien?

300
00:17:20,860 --> 00:17:23,680
‫Et seulement après cela, nous passons au

301
00:17:23,680 --> 00:17:26,950
‫gestionnaire de mise à jour de la tournée, d'accord ?

302
00:17:26,950 --> 00:17:28,670
‫Et cette partie est vraiment importante,

303
00:17:28,670 --> 00:17:30,650
‫il est donc important que nous ne

304
00:17:30,650 --> 00:17:33,620
‫passions au middleware suivant que dès que cette partie ici

305
00:17:33,620 --> 00:17:34,940
‫est vraiment terminée.

306
00:17:34,940 --> 00:17:38,940
‫Parce que sinon, demande. corps. les images seront vides,

307
00:17:38,940 --> 00:17:42,030
‫et bien sûr nos noms de fichiers ne seront pas enregistrés

308
00:17:42,030 --> 00:17:44,633
‫dans le document de visite actuel, d'accord ?

309
00:17:45,580 --> 00:17:47,710
‫Et cela termine en fait

310
00:17:47,710 --> 00:17:51,450
‫la partie de téléchargement d'images ou de fichiers de cette section.

311
00:17:51,450 --> 00:17:53,290
‫Alors j'espère que c'était amusant,

312
00:17:53,290 --> 00:17:55,850
‫je sais que pour moi c'était vraiment cool.

313
00:17:55,850 --> 00:17:58,130
‫J'aime donc beaucoup ce genre de

314
00:17:58,130 --> 00:18:02,570
‫choses, ce qui donne l'impression que mes applications ressemblent vraiment au monde réel.

315
00:18:02,570 --> 00:18:04,470
‫En tout cas, j'espère que ça vous a

316
00:18:04,470 --> 00:18:06,163
‫plu, et à bientôt pour le prochain.