1
00:00:01,170 --> 00:00:03,440
‫Narrador: En la primera parte de

2
00:00:03,440 --> 00:00:06,140
‫esta sección aprenderemos todo sobre la carga de

3
00:00:06,140 --> 00:00:09,660
‫imágenes con el paquete Multer y en este video en particular

4
00:00:09,660 --> 00:00:13,653
‫comenzaremos a implementar la carga de imágenes para las fotos de los usuarios.

5
00:00:15,230 --> 00:00:18,900
‫Pero antes de comenzar, hagamos una limpieza rápida

6
00:00:18,900 --> 00:00:22,450
‫aquí y eliminemos esta salida constante de las

7
00:00:22,450 --> 00:00:24,570
‫cookies que tenemos aquí.

8
00:00:24,570 --> 00:00:29,093
‫Eso está en algún lugar aquí abajo y eso es mucho mejor.

9
00:00:30,430 --> 00:00:33,610
‫Ahora vamos a estar trabajando en la carga de

10
00:00:33,610 --> 00:00:38,010
‫fotos de usuarios y abramos aquí las rutas de los usuarios, de acuerdo.

11
00:00:38,010 --> 00:00:41,310
‫Entonces, Multer es un middleware muy popular para manejar datos

12
00:00:41,310 --> 00:00:45,510
‫de formularios de varias partes, que es un formulario en la codificación que

13
00:00:45,510 --> 00:00:48,540
‫se usa para cargar archivos desde un formulario.

14
00:00:48,540 --> 00:00:51,200
‫Así que recuerda cómo en la última

15
00:00:51,200 --> 00:00:55,160
‫sección usamos un formulario codificado en URL para actualizar los datos del

16
00:00:55,160 --> 00:00:58,570
‫usuario y para eso también tuvimos que incluir un middleware especial.

17
00:00:58,570 --> 00:01:01,000
‫Multer es básicamente un software intermedio

18
00:01:01,000 --> 00:01:03,580
‫para datos de formularios de varias partes.

19
00:01:03,580 --> 00:01:05,770
‫Y ahora esto es lo que haremos.

20
00:01:05,770 --> 00:01:08,460
‫Permitiremos que el usuario cargue una foto en

21
00:01:08,460 --> 00:01:11,064
‫la ruta Actualizarme y, por lo

22
00:01:11,064 --> 00:01:14,430
‫tanto, en lugar de solo poder actualizar el correo electrónico

23
00:01:14,430 --> 00:01:18,620
‫y la foto, los usuarios también podrán cargar sus fotos de usuario.

24
00:01:18,620 --> 00:01:21,970
‫Entonces, una vez más, comencemos por

25
00:01:21,970 --> 00:01:25,330
‫instalar el paquete que necesitamos y, de hecho,

26
00:01:25,330 --> 00:01:30,267
‫creemos una nueva ventana de terminal aquí para que NPM instale Multer.

27
00:01:32,586 --> 00:01:37,437
‫Muy bien y aquí vemos que estamos en Multer 1. 4. 1.

28
00:01:38,420 --> 00:01:41,160
‫Y nuevamente, en caso de que tenga algún

29
00:01:41,160 --> 00:01:43,490
‫problema con este paquete, asegúrese de

30
00:01:43,490 --> 00:01:45,983
‫instalar la misma versión que estoy usando aquí.

31
00:01:47,241 --> 00:01:48,074
‫Está bien.

32
00:01:49,150 --> 00:01:51,313
‫Entonces, incluyémoslo aquí.

33
00:01:52,930 --> 00:01:57,070
‫Entonces Multer, requieres, Multer.

34
00:01:58,840 --> 00:02:03,040
‫Entonces, fácil y ahora tenemos que configurar una carga

35
00:02:03,040 --> 00:02:05,780
‫llamada Multer y luego usarla.

36
00:02:05,780 --> 00:02:08,030
‫Y hagamos eso aquí mismo

37
00:02:09,330 --> 00:02:14,330
‫al principio y llamémoslo Cargar y llamamos a la función Multer que acabamos

38
00:02:16,380 --> 00:02:19,090
‫de incluir antes y luego pasamos un

39
00:02:19,090 --> 00:02:21,160
‫objeto para algunas opciones.

40
00:02:21,160 --> 00:02:23,730
‫Y por ahora, la única opción que

41
00:02:23,730 --> 00:02:26,180
‫vamos a especificar es el

42
00:02:26,180 --> 00:02:31,180
‫destino y lo estableceré en Público / imagen / usuarios, de acuerdo.

43
00:02:34,940 --> 00:02:36,870
‫Y esa es exactamente la carpeta

44
00:02:36,870 --> 00:02:38,780
‫donde queremos guardar todas las imágenes

45
00:02:38,780 --> 00:02:40,570
‫que se están cargando.

46
00:02:40,570 --> 00:02:45,570
‫Entonces eso es aquí, Público, Imagen y Usuarios, como todas las imágenes

47
00:02:45,740 --> 00:02:48,063
‫de todos los usuarios que

48
00:02:48,063 --> 00:02:50,750
‫ya tenemos en nuestra base de datos.

49
00:02:50,750 --> 00:02:53,770
‫Bien y, por supuesto, podemos configurar esto de

50
00:02:53,770 --> 00:02:56,480
‫una manera mucho más compleja y lo

51
00:02:56,480 --> 00:02:58,670
‫haremos en nuestra próxima

52
00:02:58,670 --> 00:03:02,190
‫conferencia, pero por ahora realmente quiero que nos presente

53
00:03:02,190 --> 00:03:04,697
‫este paquete y, por cierto, podríamos

54
00:03:04,697 --> 00:03:08,010
‫haber llamado la función Multer sin ninguna opción allí.

55
00:03:08,010 --> 00:03:10,940
‫Entonces, sin esto aquí y luego, la imagen cargada simplemente se

56
00:03:10,940 --> 00:03:13,749
‫almacenaría en la memoria y no se guardaría en

57
00:03:13,749 --> 00:03:17,590
‫ningún lugar del disco, pero, por supuesto, en este punto eso no es lo

58
00:03:17,590 --> 00:03:21,290
‫que queremos y, por lo tanto, al menos debemos especificar esta opción de destino.

59
00:03:21,290 --> 00:03:23,620
‫Y con esto, nuestro archivo se carga

60
00:03:23,620 --> 00:03:26,450
‫realmente en un directorio en nuestro sistema de archivos.

61
00:03:26,450 --> 00:03:29,080
‫Y mencioné esto antes, pero asegurémonos de

62
00:03:29,080 --> 00:03:31,960
‫que estamos en la misma página sobre esto, que

63
00:03:31,960 --> 00:03:34,870
‫es que, por supuesto, las imágenes no se cargan directamente

64
00:03:34,870 --> 00:03:37,770
‫en la base de datos, simplemente las cargamos en

65
00:03:37,770 --> 00:03:40,700
‫nuestro sistema de archivos y luego en la base de

66
00:03:40,700 --> 00:03:43,510
‫datos que poner un enlace básicamente a esa imagen.

67
00:03:43,510 --> 00:03:46,170
‫Entonces, en este caso, en cada documento de

68
00:03:46,170 --> 00:03:49,450
‫usuario, tendremos que nombrar todo el archivo cargado, está bien.

69
00:03:49,450 --> 00:03:51,690
‫Nuevamente, no haremos eso en este video, pero

70
00:03:51,690 --> 00:03:53,550
‫lo haremos un poco más tarde.

71
00:03:53,550 --> 00:03:55,603
‫Por ahora hagamos que esto funcione.

72
00:03:56,490 --> 00:03:59,000
‫De todos modos, lo que tenemos que hacer

73
00:03:59,000 --> 00:04:02,150
‫ahora es usar esta carga aquí para crear realmente una función

74
00:04:02,150 --> 00:04:05,223
‫de middleware que podamos poner aquí en la ruta Actualizarme.

75
00:04:06,100 --> 00:04:09,343
‫Entonces aquí, y funciona así.

76
00:04:10,700 --> 00:04:14,670
‫Así que sube, haz un punto único, y es único porque aquí

77
00:04:14,670 --> 00:04:17,810
‫solo queremos actualizar una sola imagen y luego aquí en

78
00:04:17,810 --> 00:04:20,830
‫single pasamos el nombre del campo que va a

79
00:04:20,830 --> 00:04:22,993
‫contener la imagen para subir.

80
00:04:24,000 --> 00:04:26,480
‫Y esa será una foto, está bien.

81
00:04:26,480 --> 00:04:29,023
‫Y con campo me refiero al campo en el

82
00:04:29,023 --> 00:04:31,620
‫formulario en el que se va a cargar la imagen.

83
00:04:31,620 --> 00:04:34,400
‫Está bien, ¿tiene sentido?

84
00:04:34,400 --> 00:04:38,040
‫Entonces, nuevamente, incluimos el paquete Multer y

85
00:04:38,040 --> 00:04:41,560
‫luego con eso creamos una carga.

86
00:04:41,560 --> 00:04:44,700
‫Y esta carga es solo para definir un par

87
00:04:44,700 --> 00:04:48,640
‫de configuraciones donde en este ejemplo solo definimos el destino, luego

88
00:04:48,640 --> 00:04:52,260
‫usamos esa carga para crear un nuevo middleware que luego

89
00:04:52,260 --> 00:04:55,560
‫podemos agregar a esta pila de la ruta que

90
00:04:55,560 --> 00:04:58,400
‫queremos usar para cargar el archivo .

91
00:04:58,400 --> 00:05:01,130
‫Entonces para eso decimos upload dot single porque

92
00:05:01,130 --> 00:05:03,390
‫solo tenemos un solo archivo

93
00:05:03,390 --> 00:05:06,160
‫y luego finalmente especificamos el nombre del campo

94
00:05:06,160 --> 00:05:08,570
‫que va a contener este archivo.

95
00:05:08,570 --> 00:05:11,600
‫Bien, entonces este middleware se encargará de

96
00:05:11,600 --> 00:05:14,610
‫tomar el archivo y básicamente copiarlo

97
00:05:14,610 --> 00:05:16,960
‫al destino que especificamos.

98
00:05:16,960 --> 00:05:19,040
‫Y luego, por supuesto, llamará al

99
00:05:19,040 --> 00:05:22,083
‫siguiente middleware de la pila, que es Update Me.

100
00:05:23,210 --> 00:05:26,470
‫Además, este middleware colocará el archivo o al menos

101
00:05:26,470 --> 00:05:28,600
‫alguna información sobre el archivo

102
00:05:28,600 --> 00:05:30,810
‫en el objeto de solicitud, así

103
00:05:30,810 --> 00:05:33,080
‫que echemos un vistazo a eso.

104
00:05:33,080 --> 00:05:36,123
‫Así que vayamos a la función Actualizarme.

105
00:05:38,490 --> 00:05:42,320
‫Entonces, aquí y aquí al principio, digamos

106
00:05:43,300 --> 00:05:48,163
‫registro de puntos de la consola, archivo de puntos de registro.

107
00:05:49,630 --> 00:05:50,463
‫¿Está bien?

108
00:05:51,410 --> 00:05:55,430
‫Y también quiero echarle un vistazo al cuerpo.

109
00:05:55,430 --> 00:05:58,307
‫Genial y con esto ahora estamos realmente

110
00:05:58,307 --> 00:06:02,320
‫listos para probar esto y por ahora lo probaremos en

111
00:06:02,320 --> 00:06:04,820
‫cartero pero, por supuesto, más

112
00:06:04,820 --> 00:06:08,253
‫adelante también agregaremos esta funcionalidad al formulario, de acuerdo.

113
00:06:09,220 --> 00:06:13,720
‫Así que vayamos al cartero aquí y a Actualizarme.

114
00:06:13,720 --> 00:06:16,023
‫Básicamente, para actualizar el usuario actual.

115
00:06:17,380 --> 00:06:20,430
‫Y el usuario que quiero actualizar se llama Leo, así

116
00:06:20,430 --> 00:06:23,700
‫que traigámoslo aquí de Compass, o en realidad creo que

117
00:06:23,700 --> 00:06:26,710
‫ni siquiera es necesario porque en nuestro inicio de

118
00:06:26,710 --> 00:06:30,460
‫sesión ya tenemos este tipo de dirección de correo electrónico y su

119
00:06:30,460 --> 00:06:35,010
‫correo electrónico es leo @ example. com y la

120
00:06:35,010 --> 00:06:38,090
‫contraseña es siempre la misma.

121
00:06:38,090 --> 00:06:41,390
‫Y entonces, por supuesto, primero debemos iniciar sesión como usuario

122
00:06:41,390 --> 00:06:44,653
‫y ahora sigamos adelante y luego actualice al usuario.

123
00:06:46,620 --> 00:06:50,010
‫Entonces en el cuerpo tenemos el nombre y el rol.

124
00:06:50,010 --> 00:06:53,593
‫Así que solo actualice, digamos el nombre aquí.

125
00:06:54,560 --> 00:06:59,500
‫Entonces, el nombre actual es Leo Gillespie o Gillespie, no estoy seguro

126
00:06:59,500 --> 00:07:01,113
‫de cómo decirlo.

127
00:07:02,800 --> 00:07:07,800
‫Agreguemos algo aquí en el medio, está bien.

128
00:07:07,870 --> 00:07:11,283
‫Y ahora, finalmente, especificamos la propiedad de la foto, o

129
00:07:13,270 --> 00:07:16,370
‫en realidad no deberíamos hacerlo así, sino que deberíamos

130
00:07:16,370 --> 00:07:21,100
‫ir aquí a los datos del formulario, está bien, porque esta es la forma

131
00:07:21,100 --> 00:07:22,810
‫en que podemos enviar

132
00:07:22,810 --> 00:07:25,543
‫datos del formulario de varias partes, de acuerdo.

133
00:07:26,410 --> 00:07:31,410
‫Entonces, copiemos solo el nombre aquí y es Nombre.

134
00:07:33,470 --> 00:07:37,813
‫Muy bien, aquí la clave es Nombre y

135
00:07:37,813 --> 00:07:40,763
‫luego el valor es este.

136
00:07:42,350 --> 00:07:46,770
‫A continuación, finalmente especificamos el campo de la foto y

137
00:07:46,770 --> 00:07:50,210
‫luego aquí podemos especificar lo que queremos.

138
00:07:50,210 --> 00:07:52,700
‫Entonces, en lugar de texto, que es

139
00:07:52,700 --> 00:07:56,520
‫el predeterminado, podemos especificar el archivo y luego aquí podemos seleccionar el

140
00:07:56,520 --> 00:07:58,163
‫archivo que queremos cargar.

141
00:07:59,240 --> 00:08:04,240
‫Entonces ese archivo, esa imagen, está aquí en nuestros datos de definición nuevamente, luego en

142
00:08:04,350 --> 00:08:07,470
‫la imagen y luego aquí la imagen de Leo.

143
00:08:07,470 --> 00:08:10,430
‫Y por eso muestra a este usuario.

144
00:08:10,430 --> 00:08:13,800
‫Bien, haga clic en Abrir y ahora creo que

145
00:08:13,800 --> 00:08:16,193
‫estamos listos para enviar esa solicitud.

146
00:08:17,960 --> 00:08:22,200
‫Muy bien, tuvimos éxito y, por supuesto, como dije antes, la foto obviamente

147
00:08:22,200 --> 00:08:25,880
‫no se actualizó aquí en la salida de la base de datos

148
00:08:25,880 --> 00:08:28,450
‫porque eso es para la próxima conferencia.

149
00:08:28,450 --> 00:08:31,630
‫Por ahora solo queremos subir realmente esta imagen

150
00:08:31,630 --> 00:08:33,803
‫a esa carpeta que especificamos.

151
00:08:34,960 --> 00:08:39,180
‫Muy bien, ahora también echemos un vistazo aquí a nuestra salida y

152
00:08:39,180 --> 00:08:43,430
‫aquí tenemos el archivo de punto de solicitud, que es este, y

153
00:08:43,430 --> 00:08:46,460
‫obtenemos todo tipo de información al respecto.

154
00:08:46,460 --> 00:08:50,910
‫Entonces, el nombre original, el destino que especificamos, el nuevo nombre

155
00:08:50,910 --> 00:08:54,370
‫de archivo aquí y también el tamaño.

156
00:08:54,370 --> 00:08:57,980
‫De acuerdo, ese es el archivo de solicitud de puntos y luego

157
00:08:57,980 --> 00:08:59,920
‫recuerde que también registramos el cuerpo.

158
00:08:59,920 --> 00:09:03,810
‫Y entonces el cuerpo ahora es solo el nombre, de acuerdo.

159
00:09:03,810 --> 00:09:07,100
‫Entonces, nuestro análisis de cuerpo no es realmente capaz de manejar

160
00:09:07,100 --> 00:09:09,470
‫archivos y por eso el archivo no aparece

161
00:09:09,470 --> 00:09:11,790
‫en el cuerpo en absoluto y,

162
00:09:11,790 --> 00:09:15,920
‫por supuesto, esa es la razón por la que realmente necesitamos el paquete Multer.

163
00:09:15,920 --> 00:09:19,570
‫De todos modos, ahora echemos un vistazo a nuestra carpeta y

164
00:09:19,570 --> 00:09:24,241
‫aquí tenemos la imagen, los usuarios, y luego en algún lugar aquí debería estar

165
00:09:24,241 --> 00:09:26,890
‫la imagen que acabamos de cargar, pero

166
00:09:28,150 --> 00:09:30,160
‫realmente no puedo verla aquí.

167
00:09:30,160 --> 00:09:33,313
‫Actualicemos, ah y de hecho aquí está.

168
00:09:34,960 --> 00:09:37,890
‫Entonces, si hacemos clic en él ahora, realmente no

169
00:09:37,890 --> 00:09:39,840
‫podemos verlo porque, como puede

170
00:09:39,840 --> 00:09:42,600
‫ver aquí, ni siquiera tiene una extensión, está bien.

171
00:09:42,600 --> 00:09:46,240
‫Y es por eso que realmente no podemos abrirlo en este momento.

172
00:09:46,240 --> 00:09:49,690
‫Entonces, el archivo realmente apareció aquí en nuestra carpeta y, por

173
00:09:49,690 --> 00:09:52,320
‫lo tanto, tenemos la carga realmente funcionando.

174
00:09:52,320 --> 00:09:54,870
‫Bueno, al menos un poco, pero no

175
00:09:54,870 --> 00:09:57,350
‫estamos realmente donde lo queremos, ¿verdad?

176
00:09:57,350 --> 00:09:59,960
‫Así que queremos darle un mejor nombre de

177
00:09:59,960 --> 00:10:02,100
‫archivo y también queremos reorganizar un

178
00:10:02,100 --> 00:10:04,690
‫poco este código que tenemos en este punto.

179
00:10:04,690 --> 00:10:07,123
‫Y hagámoslo en el siguiente video.