1
00:00:03,680 --> 00:00:05,985
En la lección anterior,

2
00:00:05,985 --> 00:00:08,880
hemos aprendido cómo se

3
00:00:08,880 --> 00:00:12,445
soportan las cargas de archivos mediante el enfoque de datos multiplataforma.

4
00:00:12,445 --> 00:00:16,320
En este ejercicio, vamos a hacer uso del módulo Multer, al

5
00:00:16,320 --> 00:00:21,885
que nos referimos en la conferencia para permitir que nuestro servidor express

6
00:00:21,885 --> 00:00:27,820
admita la carga de archivos de imagen en nuestro sitio del servidor.

7
00:00:27,820 --> 00:00:33,920
Almacenarán estos archivos de imágenes en la carpeta público/images.

8
00:00:33,920 --> 00:00:40,370
Estas imágenes serían útiles dentro de nuestra aplicación cuando suministramos

9
00:00:40,370 --> 00:00:46,690
imágenes para los diversos platos o los radares o las promociones,

10
00:00:46,690 --> 00:00:51,490
que hemos construido en nuestro servidor REST API.

11
00:00:51,490 --> 00:00:54,495
Para empezar con este ejercicio,

12
00:00:54,495 --> 00:00:55,770
el primer paso, por supuesto,

13
00:00:55,770 --> 00:01:01,445
es instalar el módulo Multer para que en el mensaje escriba npm instale

14
00:01:01,445 --> 00:01:10,145
multer menos guardar y por el momento estoy usando multer 1.3.1 en este curso.

15
00:01:10,145 --> 00:01:12,785
Así que una vez instalado el módulo multer,

16
00:01:12,785 --> 00:01:21,695
vamos a nuestro proyecto e implementamos una nueva ruta que nos permita subir archivos.

17
00:01:21,695 --> 00:01:25,920
Vaya al proyecto en la carpeta de rutas,

18
00:01:25,920 --> 00:01:33,210
agreguemos un nuevo archivo llamado upload router.js.

19
00:01:33,210 --> 00:01:37,260
Este router, router express que vamos a implementar aquí,

20
00:01:37,260 --> 00:01:43,380
es el que va a soportar la carga de los archivos.

21
00:01:43,380 --> 00:01:46,250
Por lo tanto, en el enrutador de carga déjame ir

22
00:01:46,250 --> 00:01:50,120
al enrutador de platos y copiar estas primeras cosas del enrutador de platos

23
00:01:50,120 --> 00:01:52,550
porque vamos a configurar una

24
00:01:52,550 --> 00:01:57,440
estructura similar en nuestra aplicación o en el enrutador de carga.

25
00:01:57,440 --> 00:02:00,720
Así que, déjame copiar esa parte y luego editaremos eso.

26
00:02:00,720 --> 00:02:02,800
Entonces, en el enrutador de carga,

27
00:02:02,800 --> 00:02:09,850
no necesito mangosta, así que voy a quitar la mangosta y tampoco necesito los platos.

28
00:02:09,850 --> 00:02:12,755
Por lo tanto, esos dos serían eliminados y después de eso

29
00:02:12,755 --> 00:02:15,935
necesitamos expresar analizador de cuerpo y autenticar.

30
00:02:15,935 --> 00:02:25,585
Ahora, voy a requerir el módulo multer aquí.

31
00:02:25,585 --> 00:02:29,280
Una vez que incluimos el módulo multer,

32
00:02:29,280 --> 00:02:35,585
ahora este enrutador voy a llamar a esto como enrutador de carga.

33
00:02:35,585 --> 00:02:42,020
Por lo tanto, dirán cargar enrutador use analizador corporal y

34
00:02:42,020 --> 00:02:48,040
luego este pero el enrutador de carga y de nuevo,

35
00:02:48,040 --> 00:02:58,110
recuerde decir exportaciones de módulos, cargar enrutador aquí.

36
00:02:58,110 --> 00:03:00,570
Por lo tanto, para la ruta de subida de enrutadores,

37
00:03:00,570 --> 00:03:03,025
necesitamos agregar los diversos métodos.

38
00:03:03,025 --> 00:03:07,130
Voy a hacer eso un poco más tarde, pero antes de eso vamos a configurar

39
00:03:07,130 --> 00:03:11,765
multer para que podamos subir los archivos.

40
00:03:11,765 --> 00:03:19,545
Ahora, por defecto, multer se puede configurar simplemente usando multer dentro de nuestra aplicación,

41
00:03:19,545 --> 00:03:24,360
pero voy a hacer alguna configuración de multer en

42
00:03:24,360 --> 00:03:28,100
este ejercicio para que vamos

43
00:03:28,100 --> 00:03:32,615
a personalizar la forma en que Multer maneja la carga de los archivos.

44
00:03:32,615 --> 00:03:35,150
Por lo tanto, para usar el multer,

45
00:03:35,150 --> 00:03:43,455
una de las opciones que toma multer es para el almacenamiento.

46
00:03:43,455 --> 00:03:49,295
Por lo tanto, Multer proporciona esta función de almacenamiento

47
00:03:49,295 --> 00:03:56,480
en disco que nos permite definir el motor de almacenamiento y aquí podemos configurar algunas cosas.

48
00:03:56,480 --> 00:04:00,409
Ahora, si solo se trata de configurar el destino,

49
00:04:00,409 --> 00:04:03,830
simplemente puede decir dos puntos

50
00:04:03,830 --> 00:04:08,810
y luego especificar la carpeta de destino dentro de la cual se almacenarán los archivos cargados.

51
00:04:08,810 --> 00:04:15,450
Pero aquí voy a hacer alguna configuración adicional para el módulo multer aquí.

52
00:04:15,450 --> 00:04:19,715
Por lo tanto, aquí es donde voy a usar el soporte de almacenamiento en disco múltiple.

53
00:04:19,715 --> 00:04:22,025
Dentro del almacenamiento en disco,

54
00:04:22,025 --> 00:04:27,080
puedo definir un par de opciones aquí.

55
00:04:27,080 --> 00:04:32,315
Las opciones que voy a definir van a ser

56
00:04:32,315 --> 00:04:40,535
destino y la segunda es el nombre del archivo.

57
00:04:40,535 --> 00:04:45,725
Por lo tanto, dos configuraciones que voy a suministrar al almacenamiento en disco.

58
00:04:45,725 --> 00:04:48,860
El destino como cabría esperar,

59
00:04:48,860 --> 00:04:56,405
me permite configurar el destino y esto toma

60
00:04:56,405 --> 00:05:03,450
como configuración aquí una función aquí.

61
00:05:03,450 --> 00:05:06,980
Por lo tanto, el destino se configura como una función aquí.

62
00:05:06,980 --> 00:05:14,060
Esta función recibirá solicitud y también un objeto llamado el archivo,

63
00:05:14,060 --> 00:05:16,790
que contiene información sobre el archivo que ha

64
00:05:16,790 --> 00:05:21,930
sido procesado por multer y también una función de devolución de llamada.

65
00:05:21,930 --> 00:05:24,045
Entonces, cb es la función de devolución de llamada.

66
00:05:24,045 --> 00:05:27,915
Entonces, aquí para el destino,

67
00:05:27,915 --> 00:05:32,865
voy a decir cb null,

68
00:05:32,865 --> 00:05:37,054
el segundo parámetro es la carpeta de destino,

69
00:05:37,054 --> 00:05:41,330
que se puede expresar como una cadena donde se almacenarán los archivos.

70
00:05:41,330 --> 00:05:51,025
Así que, aquí, voy a suministrar el destino como imágenes de barra pública.

71
00:05:51,025 --> 00:05:54,980
Porque en este ejercicio voy a admitir subidas de imágenes.

72
00:05:54,980 --> 00:05:59,865
Por lo tanto, esa es la parte que voy a especificar aquí, por lo que la carga de la imagen.

73
00:05:59,865 --> 00:06:03,800
Por lo tanto, la función de devolución de llamada como ve toma dos parámetros.

74
00:06:03,800 --> 00:06:04,820
El primero es, por supuesto,

75
00:06:04,820 --> 00:06:07,460
el error que en este caso voy a establecerlo en

76
00:06:07,460 --> 00:06:11,335
nulo y el segundo es la carpeta de destino,

77
00:06:11,335 --> 00:06:14,110
donde se almacenarán mis imágenes.

78
00:06:14,110 --> 00:06:19,010
Por lo tanto, puedo configurar eso diciendo imágenes de barra diagonal pública.

79
00:06:19,010 --> 00:06:20,995
Entonces, en la carpeta de imágenes,

80
00:06:20,995 --> 00:06:24,300
los archivos que subo se almacenarán.

81
00:06:24,300 --> 00:06:26,370
Para el nombre de archivo también,

82
00:06:26,370 --> 00:06:31,320
obtiene los tres parámetros,

83
00:06:31,320 --> 00:06:35,985
mensaje de solicitud, archivo y la función de devolución de llamada.

84
00:06:35,985 --> 00:06:39,345
A partir de la configuración de la forma en que se llama la función de devolución de llamada,

85
00:06:39,345 --> 00:06:42,140
podemos especificar información sobre el nombre del archivo.

86
00:06:42,140 --> 00:06:47,205
Entonces, para la función de devolución de llamada diría cb null y no hay error aquí.

87
00:06:47,205 --> 00:06:51,860
Luego, el segundo insiste en el nombre del archivo,

88
00:06:51,860 --> 00:06:56,430
que se va a usar para el archivo específico que acaba de

89
00:06:56,430 --> 00:06:57,975
ser subido, cómo se va a almacenar.

90
00:06:57,975 --> 00:07:01,835
Entonces, este objeto de archivo que obtuve aquí,

91
00:07:01,835 --> 00:07:08,595
admite un conjunto de varias propiedades en él.

92
00:07:08,595 --> 00:07:11,985
Una de las propiedades se llama, nombre original.

93
00:07:11,985 --> 00:07:14,585
Por lo tanto, el nombre original esencialmente,

94
00:07:14,585 --> 00:07:19,475
nos da el nombre original del archivo desde el lado del cliente que se ha subido.

95
00:07:19,475 --> 00:07:23,410
Insisto en que, cuando el archivo se guarda en el lado

96
00:07:23,410 --> 00:07:26,380
del servidor, se le dará exactamente el

97
00:07:26,380 --> 00:07:29,710
mismo nombre que el nombre original del archivo que se ha subido.

98
00:07:29,710 --> 00:07:32,605
Para que pueda saber que estoy cargando

99
00:07:32,605 --> 00:07:35,140
exactamente el mismo archivo y en el lado del servidor cuando se

100
00:07:35,140 --> 00:07:38,200
carga el archivo se almacenará con el mismo nombre.

101
00:07:38,200 --> 00:07:42,000
Ahora, si no configura esto entonces,

102
00:07:42,000 --> 00:07:45,100
multer por defecto dará alguna cadena aleatoria

103
00:07:45,100 --> 00:07:48,130
como el nombre del archivo sin extensiones.

104
00:07:48,130 --> 00:07:51,590
Por lo tanto, eso puede no ser algo que usted estaría feliz

105
00:07:51,590 --> 00:07:55,290
de usar en este ejercicio en particular.

106
00:07:55,290 --> 00:07:58,940
Por lo tanto, es por eso que estoy configurando explícitamente diciendo que,

107
00:07:58,940 --> 00:08:04,805
el archivo debe almacenarse con el nombre original del archivo que se ha subido.

108
00:08:04,805 --> 00:08:08,300
Volveremos a encontrar este objeto de archivo con

109
00:08:08,300 --> 00:08:11,630
un poco más de detalle y veremos cómo

110
00:08:11,630 --> 00:08:15,245
podemos hacer uso de la información del objeto de archivo un poco más tarde.

111
00:08:15,245 --> 00:08:22,790
Además, también puedo especificar un filtro de archivos aquí para la configuración de multers.

112
00:08:22,790 --> 00:08:28,145
El filtro de archivos me permitirá especificar qué tipo de archivos

113
00:08:28,145 --> 00:08:33,410
estoy dispuesto a cargar o que estoy dispuesto a aceptar para cargarlos.

114
00:08:33,410 --> 00:08:37,310
Entonces, para hacer esto configuraré otra función llamada

115
00:08:37,310 --> 00:08:42,480
filtro de archivos de imagen const

116
00:08:43,360 --> 00:08:48,755
y esta definiré la función en un minuto.

117
00:08:48,755 --> 00:08:51,530
Ahora, para esto, también puedo guardar esto como

118
00:08:51,530 --> 00:08:55,580
almacenamiento const porque hemos estado usando const para todo,

119
00:08:55,580 --> 00:08:57,650
así que, solo diré almacenamiento const.

120
00:08:57,650 --> 00:08:59,480
Para el filtro de archivo de imagen,

121
00:08:59,480 --> 00:09:01,490
diré filtro de archivo de imagen const.

122
00:09:01,490 --> 00:09:07,725
Una vez más, recibe tres parámetros de solicitud,

123
00:09:07,725 --> 00:09:11,780
objeto, el objeto de archivo que contiene la información sobre

124
00:09:11,780 --> 00:09:15,660
el archivo que se ha cargado y la función de devolución de llamada aquí.

125
00:09:15,660 --> 00:09:17,260
A través de la función de devolución de

126
00:09:17,260 --> 00:09:22,535
llamada, volveré la información a mi configuración de multer que

127
00:09:22,535 --> 00:09:27,800
me permite especificar cómo voy a almacenar esta información.

128
00:09:27,800 --> 00:09:30,590
Entonces, esto va a ser una función de flecha aquí.

129
00:09:30,590 --> 00:09:35,800
Dentro de esta función de flecha lo que voy a comprobar es que,

130
00:09:35,800 --> 00:09:45,405
voy a decir si no archivo coincide con el nombre original.

131
00:09:45,405 --> 00:09:49,340
Entonces, el nombre original es una cadena aquí.

132
00:09:49,340 --> 00:09:55,780
Entonces, estoy tratando de ver si hay una coincidencia para esa cadena diciendo,

133
00:09:55,780 --> 00:09:58,260
dentro de aquí una expresión regular.

134
00:09:58,260 --> 00:10:01,570
Entonces, la expresión regular la especificaré como barra diagonal,

135
00:10:01,570 --> 00:10:05,505
punto de barra invertida y luego,

136
00:10:05,505 --> 00:10:09,565
las opciones que voy a especificar son jpg

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

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

139
00:10:25,250 --> 00:10:31,575
Entonces, así es como especifico la expresión regular allí.

140
00:10:31,575 --> 00:10:32,785
Para decir eso está bien,

141
00:10:32,785 --> 00:10:38,515
si la extensión del archivo contiene jpg o jpeg o png o gif,

142
00:10:38,515 --> 00:10:44,630
entonces lo trataré como un archivo de imagen y estaré dispuesto a aceptar esos archivos.

143
00:10:44,630 --> 00:10:47,225
Por lo tanto, eso es lo que estamos probando aquí.

144
00:10:47,225 --> 00:10:49,690
Si ese es el caso,

145
00:10:49,690 --> 00:10:54,920
eso es si la extensión del archivo no coincide con ninguna de estas cosas, así

146
00:10:54,920 --> 00:11:02,460
que, es por eso que no estamos viendo entonces diremos, return cb.

147
00:11:02,460 --> 00:11:07,890
Luego, observe que, el cb el primer parámetro sería un error.

148
00:11:07,890 --> 00:11:12,150
Por lo tanto, devolveré un nuevo error

149
00:11:12,150 --> 00:11:18,375
que dice que solo puede cargar archivos de imagen.

150
00:11:18,375 --> 00:11:23,195
Por lo tanto, estamos insistiendo en que los únicos archivos que

151
00:11:23,195 --> 00:11:28,565
aceptarán son archivos de imagen y el segundo parámetro sería falso.

152
00:11:28,565 --> 00:11:32,240
Debido a que estamos suministrando el error como el primer parámetro,

153
00:11:32,240 --> 00:11:35,460
el segundo parámetro se establece en false.

154
00:11:36,620 --> 00:11:44,340
Lo contrario es decir cb null true.

155
00:11:44,340 --> 00:11:49,840
Entonces, lo que significa que el archivo que está tratando de ser

156
00:11:49,840 --> 00:11:55,440
cargado coincide con el patrón y por lo tanto es un archivo de imagen,

157
00:11:55,440 --> 00:11:57,955
por lo que estamos dispuestos a dejar que se cargue.

158
00:11:57,955 --> 00:12:03,410
Dos configuraciones que vamos a suministrar a ese módulo multer.

159
00:12:03,410 --> 00:12:07,475
¿ Cómo configuramos el módulo multer para su uso dentro de nuestra aplicación?

160
00:12:07,475 --> 00:12:12,489
Aquí es donde declararé la carga const

161
00:12:12,489 --> 00:12:19,300
como multer y luego especificaría entre corchetes esas opciones aquí.

162
00:12:19,300 --> 00:12:27,790
Puedo especificar el almacenamiento como la función de almacenamiento que acabo de definir aquí.

163
00:12:27,790 --> 00:12:31,645
Esta función de almacenamiento es el primer parámetro,

164
00:12:31,645 --> 00:12:35,625
y el segundo parámetro es un filtro de archivos.

165
00:12:35,625 --> 00:12:40,335
Un filtro de archivos es un método que me permite especificar

166
00:12:40,335 --> 00:12:46,760
qué tipo de archivo que estoy dispuesto a aceptar y luego lo diré, filtro de archivo de imagen.

167
00:12:46,760 --> 00:12:48,890
Simplemente cambie el ajuste de palabras,

168
00:12:48,890 --> 00:12:51,860
para que pueda ver toda la línea aquí. Por

169
00:12:51,860 --> 00:12:57,045
lo tanto, dice que puede cargar solo archivos de imagen y luego para el multer,

170
00:12:57,045 --> 00:13:01,750
estoy configurando el filtro de imagen, eso es todo.

171
00:13:01,750 --> 00:13:10,435
Mi módulo multer ahora está configurado para permitirme cargar los archivos de imagen aquí.

172
00:13:10,435 --> 00:13:15,115
Entonces vamos a seguir adelante y configurar el enrutador de carga.

173
00:13:15,115 --> 00:13:16,670
Para el enrutador de carga,

174
00:13:16,670 --> 00:13:20,325
voy a permitir solo el método de publicación aquí.

175
00:13:20,325 --> 00:13:21,910
Por lo tanto, los

176
00:13:21,910 --> 00:13:30,125
métodos get, put y delete no estarán permitidos en el extremo del router de carga.

177
00:13:30,125 --> 00:13:32,130
Para ayudarme a hacer eso,

178
00:13:32,130 --> 00:13:38,270
iré al enrutador de platos y luego recordaré que ya teníamos el puesto configurado aquí.

179
00:13:38,270 --> 00:13:42,230
Voy a copiar eso y luego ir al

180
00:13:42,230 --> 00:13:47,730
enrutador de carga y luego pegaré esa información aquí.

181
00:13:47,730 --> 00:13:53,500
Diremos, si se trata de una operación get, entonces no voy

182
00:13:53,500 --> 00:14:02,230
a admitir que en el extremo sería ImageUpload.

183
00:14:02,580 --> 00:14:05,545
No se permitirá obtener,

184
00:14:05,545 --> 00:14:13,040
y de manera similar no se permitirá poner,

185
00:14:13,710 --> 00:14:20,000
y tampoco se permitirá eliminar.

186
00:14:20,640 --> 00:14:31,310
No voy a apoyar ninguna de estas operaciones, así que pon, borra.

187
00:14:31,310 --> 00:14:33,555
Estos tres no serán permitidos.

188
00:14:33,555 --> 00:14:40,030
El único método que voy a admitir es el método post.

189
00:14:40,030 --> 00:14:41,920
Para el método post,

190
00:14:41,920 --> 00:14:47,950
vamos a hacer esta autenticación hasta ese punto.

191
00:14:47,950 --> 00:14:50,560
Voy a copiar eso ahí dentro,

192
00:14:50,560 --> 00:14:57,205
cerrar ese punto final y para el post.

193
00:14:57,205 --> 00:14:59,125
Cuando se publica un archivo,

194
00:14:59,125 --> 00:15:03,035
¿cómo manejamos esta publicación?

195
00:15:03,035 --> 00:15:06,320
Para manejar el post aquí,

196
00:15:06,320 --> 00:15:09,885
no necesito el siguiente para esto.

197
00:15:09,885 --> 00:15:15,485
Ahora, además de autenticar verifyUser y autenticar verifyAdmin,

198
00:15:15,485 --> 00:15:21,280
en la misma línea configuraré la carga.

199
00:15:21,280 --> 00:15:27,270
Por lo tanto, recuerde que había configurado la carga usando multer aquí.

200
00:15:27,270 --> 00:15:29,790
Por lo tanto, voy a hacer uso de la carga que

201
00:15:29,790 --> 00:15:34,200
admite una función llamada como upload.single.

202
00:15:34,200 --> 00:15:42,400
Esta única función toma como parámetro.

203
00:15:42,400 --> 00:15:49,630
El nombre del campo de formulario que especifica ese archivo,

204
00:15:49,630 --> 00:15:52,300
lo verá en poco tiempo.

205
00:15:52,300 --> 00:16:01,930
Este campo de formulario lo nombraré como ImageFile aquí.

206
00:16:01,930 --> 00:16:09,455
Cargar solo significa que me va a permitir subir solo un archivo aquí.

207
00:16:09,455 --> 00:16:15,065
Ese único archivo especificará en el formulario de carga desde el lado del cliente

208
00:16:15,065 --> 00:16:21,730
en la carga del formulario multiparte usando ese nombre allí.

209
00:16:21,860 --> 00:16:26,525
Cuando el archivo se obtiene en el código,

210
00:16:26,525 --> 00:16:28,060
si llego a este punto,

211
00:16:28,060 --> 00:16:32,290
esta carga se encargará de manejar los errores si los hay,

212
00:16:32,290 --> 00:16:36,585
si el archivo no se carga correctamente, etc.

213
00:16:36,585 --> 00:16:38,315
Cuando llegue a este punto,

214
00:16:38,315 --> 00:16:40,630
el archivo se habría cargado correctamente y,

215
00:16:40,630 --> 00:16:43,510
por lo tanto, debe manejar el archivo subido.

216
00:16:43,510 --> 00:16:52,750
En este punto, diremos Res.statusCode es

217
00:16:52,750 --> 00:17:02,780
200 y luego Res.setHeader Content-Type,

218
00:17:12,240 --> 00:17:18,920
'application/json'. Lo que voy a hacer aquí es que,

219
00:17:19,920 --> 00:17:30,060
pasaremos de nuevo este objeto req.file del servidor al cliente.

220
00:17:30,060 --> 00:17:36,570
Este objeto req.file también contendrá la ruta al archivo allí y esa ruta puede ser

221
00:17:36,570 --> 00:17:39,890
utilizada por el cliente para configurar cualquier lugar

222
00:17:39,890 --> 00:17:43,735
donde necesite saber la ubicación de este archivo de imagen.

223
00:17:43,735 --> 00:17:47,355
Por ejemplo, si está tratando de cargar un plato en

224
00:17:47,355 --> 00:17:51,060
el lado del servidor y los detalles del plato en el lado del servidor,

225
00:17:51,060 --> 00:17:53,700
puede cargar la imagen en el servidor y luego

226
00:17:53,700 --> 00:17:56,230
recuperar la URL de esa imagen y luego puede

227
00:17:56,230 --> 00:18:02,315
incluir la URL de esa imagen en el objeto json que describe el plato.

228
00:18:02,315 --> 00:18:09,675
Luego cargue el documento json de plato en el lado del servidor.

229
00:18:09,675 --> 00:18:12,805
Luego el archivo req.file se transfiere al cliente,

230
00:18:12,805 --> 00:18:18,190
el archivo req.file como verá cuando ejecutemos este servidor,

231
00:18:18,190 --> 00:18:20,670
el archivo req.file contiene mucha información sobre

232
00:18:20,670 --> 00:18:23,370
el archivo que acaba de ser subido y por lo tanto voy a

233
00:18:23,370 --> 00:18:29,700
examinarlo para obtener información sobre el archivo que acabo de subir.

234
00:18:29,910 --> 00:18:38,405
Así es como vamos a configurar el método post allí, eso es todo.

235
00:18:38,405 --> 00:18:44,330
Mi router de carga está listo para aceptar subidas de los archivos.

236
00:18:44,330 --> 00:18:51,440
Ahora, todo lo que necesito hacer es ir a app.js y luego configurar el enrutador de carga.

237
00:18:51,440 --> 00:18:53,335
Entonces, yendo a app.js

238
00:18:53,335 --> 00:18:55,550
Ya tenemos todos estos enrutadores.

239
00:18:55,550 --> 00:19:00,350
Entonces, déjame copiar su LeaderRouter y luego

240
00:19:00,350 --> 00:19:07,475
configurarlo como UploadRouter.

241
00:19:07,475 --> 00:19:14,150
Entonces, esto está en el archivo UploadRouter aquí.

242
00:19:14,150 --> 00:19:18,965
Por lo tanto, configuraremos el UploadRouter y luego

243
00:19:18,965 --> 00:19:28,010
bajaremos aquí abajo, ahora configuraremos el endpoint ImageUpload.

244
00:19:28,010 --> 00:19:32,525
Por lo tanto, el extremo ImageUpload me permite cargar el archivo.

245
00:19:32,525 --> 00:19:37,880
Por lo tanto, esto sería UploadRouter. Eso es todo.

246
00:19:37,880 --> 00:19:44,740
Mi aplicación ahora está configurada para aceptar cargas de archivos.

247
00:19:44,740 --> 00:19:51,130
Por lo tanto, vamos a guardar los cambios y luego vamos a echar un vistazo a cómo funciona nuestra aplicación.

248
00:19:51,130 --> 00:19:53,700
Volviendo a la Terminal,

249
00:19:53,700 --> 00:19:58,310
ahora asegúrese de tener su servidor MongoDB funcionando en

250
00:19:58,310 --> 00:20:03,020
una de las pestañas de Terminal o en uno de los comandos Windows.

251
00:20:03,020 --> 00:20:04,640
En la otra ventana,

252
00:20:04,640 --> 00:20:09,210
vamos a iniciar el servidor.

253
00:20:09,210 --> 00:20:12,455
Una vez que nuestro servidor esté en funcionamiento,

254
00:20:12,455 --> 00:20:20,120
iremos a Postman y luego enviaremos o más bien subiremos un archivo desde Postman.

255
00:20:20,120 --> 00:20:22,435
Entonces, como mencioné,

256
00:20:22,435 --> 00:20:24,090
para cargar un archivo,

257
00:20:24,090 --> 00:20:26,920
usará los datos multipart/form-data.

258
00:20:26,920 --> 00:20:29,865
Así que, primero, déjame entrar yo mismo.

259
00:20:29,865 --> 00:20:33,560
Por lo tanto, haré una publicación en el inicio de sesión de los usuarios locales,

260
00:20:33,560 --> 00:20:36,140
y me conectaré como administrador porque

261
00:20:36,140 --> 00:20:38,815
solo el administrador puede cargar sus archivos allí.

262
00:20:38,815 --> 00:20:45,350
Recuerde que su servidor se está ejecutando ahora en el puerto seguro.

263
00:20:45,350 --> 00:20:52,580
Entonces, diremos https://localhost:3443,

264
00:20:52,580 --> 00:20:56,090
y no hay autorización aquí.

265
00:20:56,090 --> 00:21:03,235
Por lo tanto, permítanme desactivar la autorización aquí y luego enviar la solicitud al servidor.

266
00:21:03,235 --> 00:21:06,005
Entonces, en Postman, si esto está sucediendo,

267
00:21:06,005 --> 00:21:09,790
que dice que no pudo obtener ninguna respuesta,

268
00:21:09,790 --> 00:21:15,025
esto es porque ahora está ejecutando el servidor seguro.

269
00:21:15,025 --> 00:21:17,095
Por lo tanto, en ese caso,

270
00:21:17,095 --> 00:21:23,170
Cartero no aceptará el certificado autofirmado que está entrando.

271
00:21:23,170 --> 00:21:28,790
Entonces, en ese caso, abra la configuración aquí y en la configuración,

272
00:21:28,790 --> 00:21:31,360
debajo del campo de configuración general,

273
00:21:31,360 --> 00:21:34,765
verá esta verificación del certificado SSL.

274
00:21:34,765 --> 00:21:38,580
Desactívalo para que tu Cartero esté dispuesto a aceptar

275
00:21:38,580 --> 00:21:43,975
el certificado autofirmado que hemos instalado en el lado del servidor.

276
00:21:43,975 --> 00:21:47,450
Por lo tanto, así es como podrá ponerse en contacto con su servidor en

277
00:21:47,450 --> 00:21:53,300
el endpoint de inicio de sesión de usuario https://localhost:3443.

278
00:21:53,300 --> 00:21:55,775
Por lo tanto, cuando intentemos iniciar sesión ahora,

279
00:21:55,775 --> 00:21:59,750
ahora verá que su solicitud de publicación ha sido

280
00:21:59,750 --> 00:22:03,035
aceptada con éxito por el servidor

281
00:22:03,035 --> 00:22:06,275
y luego el servidor responde con la información del token.

282
00:22:06,275 --> 00:22:12,515
Por lo tanto, de nuevo, para asegurarse de que Postman le permite ponerse en contacto con el servidor seguro,

283
00:22:12,515 --> 00:22:16,264
haga clic en Configuración y en General,

284
00:22:16,264 --> 00:22:20,645
desactive la validación del certificado SSL.

285
00:22:20,645 --> 00:22:23,195
Entonces, una vez que inicie sesión,

286
00:22:23,195 --> 00:22:25,605
vamos a copiar el token aquí.

287
00:22:25,605 --> 00:22:28,290
Entonces, voy a copiar el token aquí.

288
00:22:28,290 --> 00:22:31,000
Ahora, intentemos subir el archivo.

289
00:22:31,000 --> 00:22:34,215
Para cargar el archivo, como notó,

290
00:22:34,215 --> 00:22:36,830
necesitamos cargar este archivo en localhost: 3443,

291
00:22:36,830 --> 00:22:46,080
y el extremo es ImageUpload.

292
00:22:47,680 --> 00:22:51,200
Para hacer ImageUpload aquí,

293
00:22:51,200 --> 00:22:57,360
en el encabezado, necesitamos configurar la autorización.

294
00:22:57,490 --> 00:23:00,560
Por lo tanto, configuraremos la autorización,

295
00:23:00,560 --> 00:23:03,035
y luego dirás,

296
00:23:03,035 --> 00:23:08,820
«Portador», y suministraremos el token que hemos obtenido.

297
00:23:08,820 --> 00:23:14,785
Por lo tanto, mantenga una copia del token en algún lugar y copie el token en el encabezado.

298
00:23:14,785 --> 00:23:18,260
En el Cuerpo, para subir un archivo,

299
00:23:18,260 --> 00:23:20,030
vamos a utilizar este formulario de datos.

300
00:23:20,030 --> 00:23:24,020
Entonces, esto es lo que le permite hacer los datos multipart/formulario aquí.

301
00:23:24,020 --> 00:23:26,625
Por lo tanto, cuando hace clic en los datos del formulario,

302
00:23:26,625 --> 00:23:32,310
aquí puede proporcionar ese archivo aquí que quería cargar.

303
00:23:32,310 --> 00:23:36,040
Por lo tanto, cuando haga clic en una nueva clave aquí,

304
00:23:37,870 --> 00:23:43,040
utilice esta clave como ImageFile.

305
00:23:43,040 --> 00:23:52,695
Recuerde que cuando configuramos el método de publicación en el sitio UploadRouter,

306
00:23:52,695 --> 00:23:56,515
especificamos que dice subir solo un ImageFile.

307
00:23:56,515 --> 00:23:59,670
Entonces, esa es la misma clave que vas a usar aquí.

308
00:23:59,670 --> 00:24:03,410
Luego, cuando dé la clave,

309
00:24:03,410 --> 00:24:05,270
luego la segunda parte,

310
00:24:05,270 --> 00:24:09,875
establecerá esto de Texto a Archivo aquí.

311
00:24:09,875 --> 00:24:15,595
Por lo tanto, esto es lo que le permite especificar el archivo como el valor de esta clave en particular.

312
00:24:15,595 --> 00:24:20,045
Entonces verá este botón diciendo: «Elegir archivos».

313
00:24:20,045 --> 00:24:25,505
Por lo tanto, puede abrir eso y luego seleccionar el archivo que desea cargar.

314
00:24:25,505 --> 00:24:30,060
Así que, aquí, voy a ir a mi,

315
00:24:30,160 --> 00:24:37,470
Tengo un archivo en una de mis carpetas aquí.

316
00:24:37,470 --> 00:24:41,685
Así que, voy a entrar en imágenes de activos,

317
00:24:41,685 --> 00:24:46,640
y luego vamos a subir un archivo PNG desde aquí.

318
00:24:46,640 --> 00:24:48,230
Por lo tanto, puede decir,

319
00:24:48,230 --> 00:24:50,280
«Sube el archivo específico».

320
00:24:50,280 --> 00:24:52,100
Por lo tanto, como recordará,

321
00:24:52,100 --> 00:24:56,020
configuramos nuestro servidor para que solo acepte ImageFile.

322
00:24:56,020 --> 00:24:58,720
Por lo tanto, diremos, «Sube ese archivo en particular».

323
00:24:58,720 --> 00:25:03,050
Luego, cuando haga clic en el botón Enviar,

324
00:25:03,050 --> 00:25:04,940
por lo que

325
00:25:04,940 --> 00:25:07,145
tenga en cuenta que en el cuerpo, debe configurar esto con datos de formulario.

326
00:25:07,145 --> 00:25:11,240
Entonces, el multipart/form-data, y luego la clave es el ImageFile,

327
00:25:11,240 --> 00:25:15,440
y el valor es el archivo que acaba de seleccionar,

328
00:25:15,440 --> 00:25:17,575
y luego haga clic en el botón Enviar.

329
00:25:17,575 --> 00:25:19,940
Por lo tanto, cuando haga clic en el botón Enviar,

330
00:25:19,940 --> 00:25:23,670
el archivo se cargará en su lado del servidor y

331
00:25:23,670 --> 00:25:27,770
luego el servidor responderá con este objeto.

332
00:25:27,770 --> 00:25:29,770
Por lo tanto, esto es lo que está contenido en el

333
00:25:29,770 --> 00:25:34,820
objeto req.file que está allí en el objeto de solicitud aquí.

334
00:25:34,820 --> 00:25:38,250
Por lo tanto, este archivo req.file, como puede ver, contiene un nombre de campo.

335
00:25:38,250 --> 00:25:39,590
Nombre de campo es ImageFile.

336
00:25:39,590 --> 00:25:43,200
Por lo tanto, observe que esto es exactamente lo mismo que este de aquí.

337
00:25:43,200 --> 00:25:50,290
El nombre original, así que observe que la expresión de nombre original contiene alberto.png,

338
00:25:50,290 --> 00:25:52,915
que es el archivo que he subido.

339
00:25:52,915 --> 00:25:56,250
Ahora puede ver por qué cuando configuré

340
00:25:56,250 --> 00:26:00,905
el almacenamiento y el nombre de archivo, configuré file.originalname.

341
00:26:00,905 --> 00:26:03,515
Por lo tanto, esto es lo que se va a usar allí.

342
00:26:03,515 --> 00:26:05,410
Puede ver el tipo de codificación,

343
00:26:05,410 --> 00:26:08,745
y el tipo MIME, y el destino,

344
00:26:08,745 --> 00:26:10,995
en qué carpeta se ha colocado el archivo,

345
00:26:10,995 --> 00:26:13,060
y la ruta real del archivo aquí,

346
00:26:13,060 --> 00:26:18,240
la ruta relativa desde la raíz de la carpeta del servidor aquí.

347
00:26:18,240 --> 00:26:23,555
Por lo tanto, esta ruta indica dónde se puede acceder al archivo en el lado del servidor.

348
00:26:23,555 --> 00:26:29,865
Por lo tanto, si está configurando los detalles de un plato o un líder, por ejemplo,

349
00:26:29,865 --> 00:26:37,490
simplemente usaría la propiedad de imagen del líder para images/alberto.png.

350
00:26:37,490 --> 00:26:40,390
Public no se debe usar de todos modos porque la carpeta pública

351
00:26:40,390 --> 00:26:43,420
es la que está actuando como la carpeta raíz de nuestro servidor.

352
00:26:43,420 --> 00:26:46,560
Por lo tanto, solo necesita suministrar estas imagenes.alberto.

353
00:26:46,560 --> 00:26:49,475
Por lo tanto, de esta ruta que obtiene,

354
00:26:49,475 --> 00:26:52,685
una vez que el archivo se carga correctamente,

355
00:26:52,685 --> 00:26:58,130
extraiga esta parte y luego use esa para la imagen en

356
00:26:58,130 --> 00:27:04,265
su documento JSON que describe el líder específico.

357
00:27:04,265 --> 00:27:09,260
Así que esa es la forma en que cargamos un archivo.

358
00:27:09,260 --> 00:27:11,985
Ahora, para convencerte de que la multa fue cargada,

359
00:27:11,985 --> 00:27:14,375
vayamos a nuestro proyecto.

360
00:27:14,375 --> 00:27:16,655
Ir a nuestro proyecto,

361
00:27:16,655 --> 00:27:22,215
en la carpeta pública,

362
00:27:22,215 --> 00:27:26,325
ahora puede ver que hay una subcarpeta de imágenes allí.

363
00:27:26,325 --> 00:27:28,120
En la subcarpeta de imágenes,

364
00:27:28,120 --> 00:27:32,785
puede ver el archivo alberta.png cargado allí.

365
00:27:32,785 --> 00:27:37,635
Ahora, podemos cargar más ImageFiles en nuestro servidor.

366
00:27:37,635 --> 00:27:40,425
Ahora, si intenta cargar un archivo que no sea de ImageFile,

367
00:27:40,425 --> 00:27:42,980
verá que el servidor no aceptará

368
00:27:42,980 --> 00:27:46,660
un archivo que no sea de ImageFile y luego responderá diciendo:

369
00:27:46,660 --> 00:27:49,180
«No se puede aceptar el archivo que no sea de ImageFile».

370
00:27:49,180 --> 00:27:54,050
Por lo tanto, así es como configuraremos nuestro servidor express

371
00:27:54,050 --> 00:27:59,390
para aceptar subidas de ImageFiles desde nuestro cliente.

372
00:27:59,390 --> 00:28:03,065
Con esto, completamos este ejercicio.

373
00:28:03,065 --> 00:28:05,400
En este ejercicio, hemos visto cómo usamos

374
00:28:05,400 --> 00:28:09,840
el metamódulo para configurar nuestro servidor express para

375
00:28:09,840 --> 00:28:17,735
aceptar cargas de archivos en un extremo de la API /imageUpload Rest.

376
00:28:17,735 --> 00:28:19,840
Cuando publicamos en el endpoint,

377
00:28:19,840 --> 00:28:25,585
el archivo se carga en una carpeta especificada en el sitio del servidor.

378
00:28:25,585 --> 00:28:27,900
Con esto, completamos este ejercicio.

379
00:28:27,900 --> 00:28:34,890
Este es un buen momento para que hagas una confirmación de git con el mensaje 'carga de archivos'.