1
00:00:01,210 --> 00:00:04,730
‫Jonas: En esta segunda parte de la carga de imágenes de

2
00:00:04,730 --> 00:00:06,943
‫la gira, ahora las procesaremos todas.

3
00:00:08,670 --> 00:00:10,300
‫Pero antes de comenzar

4
00:00:10,300 --> 00:00:12,330
‫a hacer eso, en realidad hay algo

5
00:00:12,330 --> 00:00:14,500
‫que necesito arreglar en el controlador de usuario.

6
00:00:14,500 --> 00:00:18,530
‫Y en realidad en este resizeUserPhoto, y es

7
00:00:18,530 --> 00:00:21,110
‫que en realidad tenemos

8
00:00:21,110 --> 00:00:25,210
‫que esperar toda esta operación aquí, ¿de acuerdo?

9
00:00:25,210 --> 00:00:28,940
‫Entonces, todo esto aquí realmente devolverá una promesa, y eso

10
00:00:28,940 --> 00:00:30,640
‫tiene sentido, ¿verdad? Porque

11
00:00:30,640 --> 00:00:33,950
‫todas estas operaciones aquí, toman algo de tiempo y,

12
00:00:33,950 --> 00:00:36,460
‫por supuesto, suceden en segundo plano.

13
00:00:36,460 --> 00:00:38,390
‫Por lo tanto, son código

14
00:00:38,390 --> 00:00:41,850
‫asincrónico y, obviamente, no deberían bloquear el bucle de eventos.

15
00:00:41,850 --> 00:00:43,940
‫Ahora, el problema aquí es

16
00:00:43,940 --> 00:00:46,260
‫que ahora mismo estamos llamando a la

17
00:00:46,260 --> 00:00:49,030
‫siguiente función aquí, por lo que el próximo middleware,

18
00:00:49,030 --> 00:00:51,330
‫sin esperar que estas operaciones terminen aquí.

19
00:00:51,330 --> 00:00:53,380
‫Y esa no es una buena idea.

20
00:00:53,380 --> 00:00:55,653
‫Entonces, simplemente usemos await

21
00:00:56,800 --> 00:01:01,483
‫aquí, y luego, por supuesto, async, y todas esas cosas.

22
00:01:02,520 --> 00:01:04,483
‫Así que atrapa Async aquí.

23
00:01:07,110 --> 00:01:11,020
‫Muy bien, salve, y eso es mucho mejor.

24
00:01:11,020 --> 00:01:12,930
‫Y ahora vamos a hacer

25
00:01:12,930 --> 00:01:15,580
‫algo muy similar con las imágenes de nuestra gira.

26
00:01:15,580 --> 00:01:18,150
‫Así que déjame seguir adelante y copiar esto.

27
00:01:20,850 --> 00:01:22,540
‫Está bien, y aunque

28
00:01:22,540 --> 00:01:26,923
‫no va a ser exactamente igual, es bueno tenerlo ya aquí.

29
00:01:28,760 --> 00:01:31,113
‫Entonces esta también será una función asincrónica.

30
00:01:36,440 --> 00:01:39,320
‫Muy bien, ahora como antes, en caso

31
00:01:39,320 --> 00:01:41,740
‫de que no haya imágenes

32
00:01:41,740 --> 00:01:44,390
‫cargadas, queremos pasar directamente al siguiente middleware.

33
00:01:45,770 --> 00:01:50,290
‫Entonces, si no hay ninguna solicitud. archivos, y de hecho voy a

34
00:01:50,290 --> 00:01:52,620
‫ir un paso más allá, requiriendo que

35
00:01:52,620 --> 00:01:55,300
‫haya tanto la portada de la imagen como

36
00:01:55,300 --> 00:01:56,690
‫también las imágenes.

37
00:01:56,690 --> 00:01:59,450
‫Básicamente, queremos pasar al siguiente middleware en caso de que no

38
00:01:59,450 --> 00:02:02,663
‫haya ninguna solicitud. archivos. imageCover,

39
00:02:06,150 --> 00:02:11,150
‫o sin solicitud. archivos. imágenes.

40
00:02:15,240 --> 00:02:18,463
‫Entonces, en ese caso, el siguiente.

41
00:02:20,840 --> 00:02:24,003
‫Bien, y ahora comencemos procesando la imagen

42
00:02:26,860 --> 00:02:31,420
‫de portada, y luego todas las demás imágenes en un

43
00:02:31,420 --> 00:02:32,623
‫bucle, básicamente.

44
00:02:34,220 --> 00:02:36,170
‫Entonces otras imágenes.

45
00:02:36,170 --> 00:02:39,550
‫Ahora, ¿de dónde sacamos la imagen de portada?

46
00:02:39,550 --> 00:02:44,460
‫Pues recuerda como te dije que es a pedido. archivos?

47
00:02:44,460 --> 00:02:47,403
‫Ya no archivar, y luego. coverImage, o

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

49
00:02:50,610 --> 00:02:52,653
‫¿Y luego recuerdas cómo era una matriz?

50
00:02:53,610 --> 00:02:56,113
‫Así que echemos un vistazo a eso una vez más.

51
00:02:58,850 --> 00:03:02,170
‫Bien, entonces todo esto es pedido. files, y

52
00:03:02,170 --> 00:03:05,161
‫luego de allí tomamos imageCover, y esa

53
00:03:05,161 --> 00:03:07,950
‫es una matriz de un elemento.

54
00:03:07,950 --> 00:03:11,710
‫Y ahora queremos el elemento número cero, y

55
00:03:11,710 --> 00:03:13,780
‫luego. buffer.

56
00:03:13,780 --> 00:03:17,120
‫Así que esta cosa de aspecto extraño aquí.

57
00:03:17,120 --> 00:03:20,750
‫Entonces queremos cambiar su tamaño a una proporción

58
00:03:20,750 --> 00:03:23,710
‫de 2/3, y el ancho será

59
00:03:23,710 --> 00:03:28,090
‫de 2000 píxeles y la altura de 1333, ¿de acuerdo?

60
00:03:28,090 --> 00:03:31,380
‫Y nuevamente, esa es una buena proporción de 3/2, que

61
00:03:31,380 --> 00:03:33,750
‫es muy común en las imágenes.

62
00:03:33,750 --> 00:03:38,687
‫A continuación, también queremos formatearlo como JPEG con un 90% de calidad y

63
00:03:38,687 --> 00:03:40,820
‫luego guardarlo como un archivo.

64
00:03:40,820 --> 00:03:43,763
‫Pero esta vez se trata de imágenes /

65
00:03:45,828 --> 00:03:49,230
‫recorridos, y aquí definamos nuestro nombre de archivo por separado.

66
00:03:50,890 --> 00:03:54,480
‫Está bien, porque de hecho lo vamos a necesitar de nuevo.

67
00:03:54,480 --> 00:03:56,557
‫Entonces, imageCoverFilename, y una

68
00:04:00,330 --> 00:04:04,110
‫vez más, ahora necesitamos crear un nombre de archivo único.

69
00:04:04,110 --> 00:04:08,070
‫Así que ahora es un recorrido, y luego volvamos a poner

70
00:04:08,070 --> 00:04:12,380
‫aquí el ID del recorrido, donde antes estaba el ID del usuario.

71
00:04:12,380 --> 00:04:16,010
‫Y eso es a pedido. params, así que recuerde que

72
00:04:16,010 --> 00:04:17,770
‫esta ruta siempre contendrá el

73
00:04:17,770 --> 00:04:20,140
‫ID del recorrido y, por lo tanto,

74
00:04:20,140 --> 00:04:24,393
‫es bajo pedido. params. identificación.

75
00:04:26,290 --> 00:04:31,290
‫Luego, nuevamente la marca de tiempo, Fecha. ahora, y luego digamos

76
00:04:33,810 --> 00:04:38,060
‫que esta es la imagen de portada, ¿de acuerdo?

77
00:04:38,060 --> 00:04:40,720
‫Y los demás obtendrán algunos números.

78
00:04:40,720 --> 00:04:44,843
‫Y luego, por supuesto. jpeg, así que usemos eso aquí.

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

80
00:04:49,130 --> 00:04:52,100
‫De acuerdo, y ahora, como último paso, en realidad

81
00:04:52,100 --> 00:04:53,720
‫necesitamos hacer posible que

82
00:04:53,720 --> 00:04:55,660
‫nuestro administrador de viajes de actualización

83
00:04:55,660 --> 00:04:59,230
‫elija este nombre de archivo de portada de imagen para actualizarlo

84
00:04:59,230 --> 00:05:01,680
‫en el documento de viaje actual, ¿de acuerdo?

85
00:05:01,680 --> 00:05:03,290
‫Así que echemos un

86
00:05:03,290 --> 00:05:06,830
‫vistazo rápido a cómo se actualiza realmente el documento.

87
00:05:06,830 --> 00:05:08,780
‫Y, por lo tanto, estamos usando

88
00:05:08,780 --> 00:05:11,290
‫esta función de fábrica updateOne de manera muy simple.

89
00:05:11,290 --> 00:05:14,430
‫Y ese simplemente actualizará todos los datos que están

90
00:05:14,430 --> 00:05:17,163
‫en el cuerpo en el nuevo documento.

91
00:05:18,460 --> 00:05:21,670
‫Así que solo para demostrártelo aquí mismo.

92
00:05:21,670 --> 00:05:26,670
‫Entonces updateOne, toma toda la solicitud. cuerpo, ¿de acuerdo?

93
00:05:26,730 --> 00:05:29,920
‫Y ahora el secreto es poner este nombre de archivo

94
00:05:29,920 --> 00:05:34,313
‫de portada de imagen a pedido. cuerpo, ¿de acuerdo?

95
00:05:36,720 --> 00:05:39,760
‫Así que solicítalo. cuerpo. Imagen de portada.

96
00:05:41,840 --> 00:05:45,270
‫Ah, y de nuevo, se llama imageCover en

97
00:05:45,270 --> 00:05:49,850
‫su lugar, debería ser igual a imageCoverFilename, ¿de acuerdo, tiene sentido?

98
00:05:52,350 --> 00:05:54,350
‫Y, por supuesto, se llama imageCover

99
00:05:54,350 --> 00:05:57,710
‫porque ese es el nombre que tenemos en nuestra definición de esquema.

100
00:05:57,710 --> 00:05:59,730
‫Entonces, cuando esté haciendo la actualización,

101
00:05:59,730 --> 00:06:02,280
‫hará coincidir este campo en el cuerpo con

102
00:06:02,280 --> 00:06:04,530
‫el campo en nuestra base de datos.

103
00:06:04,530 --> 00:06:06,920
‫Y de hecho podemos refactorizar esto un

104
00:06:06,920 --> 00:06:10,950
‫poco porque realmente no necesitamos este nombre de variable aquí en absoluto.

105
00:06:10,950 --> 00:06:15,113
‫Así que simplemente podríamos poner este nombre de archivo aquí en el cuerpo.

106
00:06:16,040 --> 00:06:20,260
‫Así que pon eso aquí, y luego úsalo aquí de inmediato.

107
00:06:20,260 --> 00:06:23,390
‫Entonces no necesitamos esta línea de código en absoluto.

108
00:06:23,390 --> 00:06:27,430
‫Genial, y ahora, antes de pasar a las otras imágenes, probémoslo

109
00:06:27,430 --> 00:06:29,940
‫con lo que ya tenemos en

110
00:06:29,940 --> 00:06:30,903
‫este momento.

111
00:06:31,980 --> 00:06:35,080
‫Así que vamos a deshacernos de esta consola. log, por lo

112
00:06:35,080 --> 00:06:37,170
‫que cuando hagamos la solicitud,

113
00:06:37,170 --> 00:06:40,100
‫nuestra imagen de portada ya debería estar

114
00:06:40,100 --> 00:06:43,950
‫cargada y colocada en el documento de gira, ¿de acuerdo?

115
00:06:43,950 --> 00:06:46,870
‫Entonces, estas otras tres imágenes aquí, por supuesto que no, pero al

116
00:06:46,870 --> 00:06:48,300
‫menos la portada de la

117
00:06:48,300 --> 00:06:50,183
‫imagen debería estar funcionando ahora en este

118
00:06:51,340 --> 00:06:53,253
‫punto, al menos si hicimos todo correctamente.

119
00:06:54,410 --> 00:06:56,863
‫Entonces, veamos si está en algún lugar aquí,

120
00:06:57,760 --> 00:06:59,963
‫y las imágenes todavía están vacías obviamente.

121
00:07:00,970 --> 00:07:05,970
‫Pero ahora estoy buscando la imagen de portada, ¿dónde está?

122
00:07:06,640 --> 00:07:09,280
‫Y aquí está, imageCover, y se

123
00:07:09,280 --> 00:07:11,843
‫parece mucho al nombre de archivo

124
00:07:11,843 --> 00:07:13,970
‫que acabamos de especificar.

125
00:07:13,970 --> 00:07:18,970
‫Y tratemos de recargar nuestra página de todos los recorridos aquí, y tal vez

126
00:07:21,130 --> 00:07:23,550
‫nuestro nuevo recorrido ya esté aquí.

127
00:07:23,550 --> 00:07:28,430
‫Ah, aquí vamos, así que ese es el nuevo tour de ciclistas de montaña.

128
00:07:28,430 --> 00:07:32,180
‫Y esta es de hecho la imagen que acabamos de subir.

129
00:07:32,180 --> 00:07:34,090
‫Tan hermoso.

130
00:07:34,090 --> 00:07:36,300
‫Ahora bien, si intentamos abrir

131
00:07:36,300 --> 00:07:40,870
‫esta página, entonces las otras imágenes no están aquí, ¿de acuerdo?

132
00:07:40,870 --> 00:07:42,780
‫Así que no se encuentran por ninguna

133
00:07:42,780 --> 00:07:45,513
‫parte y, por supuesto, eso es lo que haremos a continuación.

134
00:07:47,520 --> 00:07:48,353
‫Está bien.

135
00:07:50,340 --> 00:07:52,820
‫Así que recuerde que nuestras

136
00:07:52,820 --> 00:07:55,700
‫imágenes aquí también son una matriz,

137
00:07:55,700 --> 00:07:59,360
‫que luego contiene todas estas cargas de archivos nuevos.

138
00:07:59,360 --> 00:08:01,500
‫Entonces, ahora usemos un bucle para

139
00:08:01,500 --> 00:08:03,833
‫procesar cada uno de ellos en una iteración.

140
00:08:04,900 --> 00:08:09,700
‫Así que solicítalo. archivos. imágenes. para cada.

141
00:08:14,330 --> 00:08:15,810
‫Y luego nuestra función de

142
00:08:15,810 --> 00:08:18,823
‫devolución de llamada en la que obtenemos acceso al archivo actual.

143
00:08:21,200 --> 00:08:23,780
‫Muy bien, ahora aquí realmente necesitamos crear

144
00:08:23,780 --> 00:08:26,560
‫el nombre de archivo actual, y verá por

145
00:08:26,560 --> 00:08:28,210
‫qué en un segundo.

146
00:08:29,550 --> 00:08:33,850
‫Entonces el nombre de archivo es igual, y luego algo muy similar a esto.

147
00:08:35,758 --> 00:08:38,160
‫Con la diferencia de que ahora no

148
00:08:38,160 --> 00:08:41,230
‫es cover, sino que queremos llamarlos uno, dos y tres.

149
00:08:41,230 --> 00:08:43,040
‫Entonces, en nuestra función

150
00:08:43,040 --> 00:08:47,173
‫de devolución de llamada, también obtenemos acceso al índice actual, ¿de acuerdo?

151
00:08:48,920 --> 00:08:53,920
‫Entonces necesitamos el archivo y yo el índice.

152
00:08:54,220 --> 00:08:57,923
‫Y aquí no es la portada, sino el índice más uno.

153
00:09:00,330 --> 00:09:04,240
‫Entonces más uno, y eso es solo

154
00:09:04,240 --> 00:09:09,010
‫porque este índice está basado en cero, ¿de acuerdo?

155
00:09:09,010 --> 00:09:11,693
‫A continuación, viene el paso de procesamiento en sí,

156
00:09:13,060 --> 00:09:15,603
‫que nuevamente es muy similar a este.

157
00:09:17,400 --> 00:09:21,873
‫Y ahora, por supuesto, también debemos marcar esto como asíncrono.

158
00:09:23,660 --> 00:09:27,083
‫Muy bien, y aquí abajo está ahora el nombre del archivo.

159
00:09:29,360 --> 00:09:33,570
‫Bien, ahora ¿por qué realmente necesitamos este nombre de archivo?

160
00:09:33,570 --> 00:09:37,250
‫Bueno, lo necesitamos porque ahora necesitamos enviar este nombre de

161
00:09:37,250 --> 00:09:42,250
‫archivo a la solicitud. cuerpo. imágenes, y esa es exactamente la misma lógica que

162
00:09:42,280 --> 00:09:45,913
‫teníamos aquí antes a pedido. cuerpo. imageCover.

163
00:09:47,040 --> 00:09:49,020
‫Así que recuerda que en

164
00:09:49,020 --> 00:09:52,870
‫nuestra colección, solicita. cuerpo. images es en realidad una matriz.

165
00:09:52,870 --> 00:09:55,610
‫Y ahora tenemos que crear esa matriz e

166
00:09:55,610 --> 00:09:57,343
‫iniciarla como una matriz vacía.

167
00:09:58,400 --> 00:10:01,430
‫Así que solicítalo. cuerpo. images como

168
00:10:03,870 --> 00:10:07,150
‫una matriz vacía, y luego en cada iteración

169
00:10:07,150 --> 00:10:09,720
‫empujaremos el nombre de archivo actual

170
00:10:09,720 --> 00:10:11,770
‫a esta matriz de imágenes.

171
00:10:11,770 --> 00:10:15,070
‫Así que solicítalo. cuerpo. imágenes. empujar,

172
00:10:19,580 --> 00:10:23,370
‫el nombre del archivo, ¿de acuerdo?

173
00:10:23,370 --> 00:10:25,100
‫Y con esto casi terminamos.

174
00:10:25,100 --> 00:10:27,020
‫Solo hay un pequeño problema, que es

175
00:10:27,020 --> 00:10:28,530
‫el hecho de que en realidad

176
00:10:28,530 --> 00:10:31,710
‫no estamos usando async await correctamente aquí en este caso, por lo

177
00:10:31,710 --> 00:10:33,200
‫que en este bucle.

178
00:10:33,200 --> 00:10:35,560
‫Y eso se debe a que este

179
00:10:35,560 --> 00:10:38,450
‫async await aquí solo está dentro de esta función de

180
00:10:38,450 --> 00:10:40,550
‫devolución de llamada del bucle foreach.

181
00:10:40,550 --> 00:10:42,880
‫Y eso en realidad no evitará

182
00:10:42,880 --> 00:10:46,300
‫que el código se mueva justo al lado de esta

183
00:10:46,300 --> 00:10:49,390
‫línea donde luego llamamos al siguiente middleware, ¿de acuerdo?

184
00:10:49,390 --> 00:10:52,510
‫Nuevamente, ahora mismo no estamos esperando nada de esto

185
00:10:52,510 --> 00:10:55,940
‫aquí, nuevamente, porque esta espera asíncrona ocurre dentro de la

186
00:10:55,940 --> 00:10:58,000
‫función de devolución de llamada

187
00:10:58,000 --> 00:11:00,440
‫de uno de estos métodos de bucle.

188
00:11:00,440 --> 00:11:03,310
‫Y nos encontramos con este tipo de problema

189
00:11:03,310 --> 00:11:06,040
‫antes, pero afortunadamente hay una solución para

190
00:11:06,040 --> 00:11:08,970
‫esto, porque dado que esta es una función

191
00:11:08,970 --> 00:11:11,470
‫asíncrona aquí, devolverá una nueva promesa.

192
00:11:11,470 --> 00:11:13,610
‫Entonces, si hacemos un

193
00:11:13,610 --> 00:11:17,210
‫mapa, podemos guardar una serie de todas estas promesas.

194
00:11:17,210 --> 00:11:18,910
‫Y luego, si tenemos una matriz,

195
00:11:18,910 --> 00:11:22,190
‫podemos usar la promesa. todo para esperarlos a todos.

196
00:11:22,190 --> 00:11:24,530
‫Y entonces, con eso, realmente esperaremos hasta

197
00:11:24,530 --> 00:11:27,000
‫que todo este código, y en este caso,

198
00:11:27,000 --> 00:11:29,340
‫hasta que se complete todo el procesamiento

199
00:11:29,340 --> 00:11:32,180
‫de imágenes, y solo entonces pasaremos a la siguiente

200
00:11:32,180 --> 00:11:34,290
‫línea, que es llamar al

201
00:11:34,290 --> 00:11:37,000
‫siguiente middleware para actualizar realmente los documentos del recorrido.

202
00:11:37,000 --> 00:11:38,960
‫Y si no hiciéramos eso

203
00:11:38,960 --> 00:11:41,020
‫en este caso, realmente no

204
00:11:41,020 --> 00:11:44,090
‫funcionaría en absoluto, porque sin este empuje aquí,

205
00:11:44,090 --> 00:11:48,260
‫la solicitud. cuerpo. las imágenes aún estarían vacías

206
00:11:48,260 --> 00:11:49,460
‫cuando llamemos a continuación.

207
00:11:49,460 --> 00:11:51,880
‫Por lo tanto, ninguno de estos

208
00:11:51,880 --> 00:11:55,260
‫nombres de imágenes se conservaría en el documento, ¿de acuerdo?

209
00:11:55,260 --> 00:11:57,630
‫Así que usemos ahora la promesa. all, y

210
00:11:57,630 --> 00:12:02,250
‫en realidad ni siquiera estoy guardando esta matriz aquí en ninguna variable,

211
00:12:02,250 --> 00:12:06,340
‫sino que usaré la promesa. todo de inmediato

212
00:12:06,340 --> 00:12:07,913
‫en esto.

213
00:12:09,030 --> 00:12:14,030
‫Así que espera Promise. todo en la matriz

214
00:12:15,010 --> 00:12:17,963
‫que regresa de esto, ¿de acuerdo?

215
00:12:19,870 --> 00:12:21,906
‫Así que espero que tenga sentido.

216
00:12:21,906 --> 00:12:25,093
‫Así que ahora registremos el cuerpo aquí en la consola.

217
00:12:28,390 --> 00:12:32,190
‫Muy bien, y con esto ahora deberíamos estar listos

218
00:12:32,190 --> 00:12:35,560
‫para cargar todas nuestras imágenes, ¿de acuerdo?

219
00:12:35,560 --> 00:12:40,560
‫Bajemos aquí e intentemos esto de nuevo.

220
00:12:44,290 --> 00:12:46,903
‫Muy bien, entonces, ¿dónde está nuestra matriz de imágenes?

221
00:12:54,440 --> 00:12:57,800
‫Bueno, tal vez estaba en algún lugar aquí arriba, ah, aquí está.

222
00:12:57,800 --> 00:12:59,660
‫Así que me perdí eso de alguna manera.

223
00:12:59,660 --> 00:13:03,300
‫Y eso parece muy prometedor, ¿verdad?

224
00:13:03,300 --> 00:13:05,730
‫Entonces, tres bonitas imágenes,

225
00:13:05,730 --> 00:13:08,693
‫echemos un vistazo aquí en nuestra página.

226
00:13:10,910 --> 00:13:15,910
‫Ah, ahí están, pero no del todo correctos, ¿verdad?

227
00:13:15,980 --> 00:13:18,540
‫Entonces parece como si simplemente hubiéramos subido

228
00:13:18,540 --> 00:13:20,943
‫la imagen de portada tres veces.

229
00:13:22,050 --> 00:13:24,710
‫Entonces, echemos un vistazo a Postman, pero los

230
00:13:24,710 --> 00:13:26,840
‫nombres de las imágenes son correctos,

231
00:13:26,840 --> 00:13:29,963
‫por lo que hay algo mal en nuestro procesamiento allí.

232
00:13:32,470 --> 00:13:37,050
‫Echemos un vistazo también a las solicitudes. cuerpo, oh, y me olvidé

233
00:13:37,050 --> 00:13:39,243
‫de ponerlo aquí.

234
00:13:41,820 --> 00:13:44,220
‫De acuerdo, pero creo que ni siquiera es necesario porque

235
00:13:44,220 --> 00:13:45,700
‫acabamos de ver en Postman

236
00:13:45,700 --> 00:13:47,763
‫que los nombres de archivo son realmente correctos.

237
00:13:48,630 --> 00:13:50,630
‫Entonces ya no necesitamos este.

238
00:13:50,630 --> 00:13:53,150
‫Ahora echemos un vistazo a los nombres

239
00:13:53,150 --> 00:13:58,150
‫de archivo que acabamos de cargar, para que estén en público y en recorridos.

240
00:14:00,570 --> 00:14:01,673
‫Y aquí están.

241
00:14:04,120 --> 00:14:07,763
‫Entonces este fue probablemente el primero de la última prueba.

242
00:14:10,980 --> 00:14:13,860
‫Y como puede ver, todos ellos son, de

243
00:14:13,860 --> 00:14:15,920
‫hecho, la misma imagen exacta.

244
00:14:15,920 --> 00:14:20,720
‫Así que la portada, uno, dos y tres son las mismas

245
00:14:20,720 --> 00:14:23,760
‫imágenes, y eso no es correcto.

246
00:14:23,760 --> 00:14:27,500
‫Y puedo ver de inmediato cuál es el problema.

247
00:14:27,500 --> 00:14:30,980
‫Entonces ve que en realidad estamos leyendo, todavía,

248
00:14:30,980 --> 00:14:33,950
‫solicitud. archivos. imageCover, y

249
00:14:33,950 --> 00:14:37,533
‫no el archivo de la iteración actual de este bucle.

250
00:14:39,090 --> 00:14:43,107
‫Bien, en su lugar, debería ser archivo. buffer.

251
00:14:45,930 --> 00:14:48,210
‫Muy bien, sigamos adelante y

252
00:14:48,210 --> 00:14:50,073
‫eliminemos todos estos.

253
00:14:54,440 --> 00:14:57,253
‫Está bien, y simplemente inténtalo de nuevo ahora.

254
00:14:59,490 --> 00:15:00,653
‫Así que enviemos eso.

255
00:15:03,220 --> 00:15:05,633
‫Los nombres parecen ser

256
00:15:06,810 --> 00:15:10,310
‫correctos, pero ahora, cuando recarguemos esto, veamos.

257
00:15:10,310 --> 00:15:12,680
‫Ah, eso parece correcto.

258
00:15:12,680 --> 00:15:14,260
‫Hermoso hermoso.

259
00:15:14,260 --> 00:15:17,120
‫Verá que todas las imágenes están muy bien formateadas,

260
00:15:17,120 --> 00:15:19,480
‫incluso esta que estaba, recuerde, en retrato

261
00:15:19,480 --> 00:15:21,720
‫y ni siquiera en paisaje,

262
00:15:21,720 --> 00:15:24,913
‫pero básicamente lo recortamos y todavía se ve hermoso.

263
00:15:26,300 --> 00:15:29,473
‫Bien, aquí ahora podemos confirmar eso, de

264
00:15:31,000 --> 00:15:34,993
‫modo que en realidad está en los 2.000 por 1.333 píxeles.

265
00:15:37,220 --> 00:15:40,880
‫Muy bien, todavía es un poco grande aquí, así que tal

266
00:15:40,880 --> 00:15:44,360
‫vez podríamos reducir la calidad un poco más, pero eso

267
00:15:44,360 --> 00:15:46,280
‫no es realmente importante.

268
00:15:46,280 --> 00:15:47,943
‫Lo que realmente importa aquí

269
00:15:47,943 --> 00:15:51,350
‫es que la lógica que acabamos de aplicar aquí realmente funciona.

270
00:15:51,350 --> 00:15:55,233
‫Así que para recapitular rápidamente lo que hicimos en estas dos conferencias.

271
00:15:56,820 --> 00:16:00,920
‫Así que creamos una carga múltiple usando el almacenamiento de memoria

272
00:16:00,920 --> 00:16:03,183
‫y este filtro solo para imágenes.

273
00:16:04,330 --> 00:16:07,370
‫Luego, creamos el middleware de la imagen del

274
00:16:07,370 --> 00:16:11,490
‫recorrido de carga utilizando upload. fields, que incluye una portada

275
00:16:11,490 --> 00:16:14,570
‫de imagen y tres imágenes, y luego, en

276
00:16:14,570 --> 00:16:19,020
‫la solicitud, pondrá la propiedad de los archivos de esta manera, ¿de acuerdo?

277
00:16:19,020 --> 00:16:22,600
‫Luego, en nuestro próximo middleware, cambiamos el tamaño de estas

278
00:16:22,600 --> 00:16:24,170
‫imágenes, primero la imagen

279
00:16:24,170 --> 00:16:27,090
‫de portada y luego las tres imágenes restantes.

280
00:16:27,090 --> 00:16:28,930
‫Y lo que es realmente importante tener en cuenta

281
00:16:28,930 --> 00:16:33,380
‫aquí es cómo solicitamos los nombres de los archivos de imágenes. cuerpo.

282
00:16:33,380 --> 00:16:35,620
‫Y lo hacemos para que en el

283
00:16:35,620 --> 00:16:37,570
‫próximo middleware, que es el

284
00:16:37,570 --> 00:16:40,230
‫controlador de ruta real, coloque esos datos en el

285
00:16:40,230 --> 00:16:42,620
‫nuevo documento cuando lo actualice, ¿de acuerdo?

286
00:16:42,620 --> 00:16:44,700
‫Así que hacemos eso con la portada de

287
00:16:44,700 --> 00:16:46,940
‫la imagen, y también lo hacemos con las imágenes

288
00:16:46,940 --> 00:16:50,120
‫restantes empujándola hacia el cuerpo. imágenes, que, como

289
00:16:50,120 --> 00:16:52,510
‫sabemos por nuestro esquema de

290
00:16:52,510 --> 00:16:54,920
‫recorrido, esperan una matriz de cadenas.

291
00:16:54,920 --> 00:16:57,290
‫Y en este caso, los nombres de archivo.

292
00:16:57,290 --> 00:16:58,980
‫Entonces, sobre estas otras imágenes,

293
00:16:58,980 --> 00:17:03,490
‫las teníamos a pedido. archivos. images, por lo que

294
00:17:03,490 --> 00:17:07,150
‫es una matriz y, por supuesto, lo recorremos usando map.

295
00:17:07,150 --> 00:17:10,130
‫Y usamos map para que básicamente podamos guardar

296
00:17:10,130 --> 00:17:12,680
‫las tres promesas que son el

297
00:17:12,680 --> 00:17:15,710
‫resultado de estas tres funciones asíncronas aquí, de

298
00:17:15,710 --> 00:17:17,920
‫modo que podamos esperarlas todas

299
00:17:17,920 --> 00:17:20,860
‫aquí usando Promise. ¿todo bien?

300
00:17:20,860 --> 00:17:23,680
‫Y solo después de eso, pasamos al

301
00:17:23,680 --> 00:17:26,950
‫controlador de actualización de la gira real, ¿de acuerdo?

302
00:17:26,950 --> 00:17:28,670
‫Y esta parte es realmente importante,

303
00:17:28,670 --> 00:17:30,650
‫por lo que es importante que

304
00:17:30,650 --> 00:17:33,620
‫solo pasemos al siguiente middleware tan pronto como esta parte

305
00:17:33,620 --> 00:17:34,940
‫esté realmente completa.

306
00:17:34,940 --> 00:17:38,940
‫Porque de lo contrario, solicita. cuerpo. las imágenes estarán vacías

307
00:17:38,940 --> 00:17:42,030
‫y, por supuesto, nuestros nombres de archivo no se guardarán

308
00:17:42,030 --> 00:17:44,633
‫en el documento de viaje actual, ¿de acuerdo?

309
00:17:45,580 --> 00:17:47,710
‫Y eso realmente concluye la

310
00:17:47,710 --> 00:17:51,450
‫parte de carga de imágenes o archivos de esta sección.

311
00:17:51,450 --> 00:17:53,290
‫Así que espero que haya

312
00:17:53,290 --> 00:17:55,850
‫sido divertido, sé que para mí fue realmente genial.

313
00:17:55,850 --> 00:17:58,130
‫Así que me gusta mucho este tipo

314
00:17:58,130 --> 00:18:02,570
‫de cosas, lo que hace que mis aplicaciones se sientan como en el mundo real.

315
00:18:02,570 --> 00:18:04,470
‫De todos modos, espero que lo hayan disfrutado,

316
00:18:04,470 --> 00:18:06,163
‫y nos vemos en el próximo.