1
00:00:01,290 --> 00:00:03,840
‫Conferencista: Permitamos ahora que los

2
00:00:03,840 --> 00:00:07,883
‫usuarios carguen sus fotos directamente en nuestro sitio web.

3
00:00:09,610 --> 00:00:11,640
‫Y esto es lo que queremos.

4
00:00:11,640 --> 00:00:13,760
‫Cuando hacemos clic aquí, básicamente queremos

5
00:00:13,760 --> 00:00:15,915
‫abrir una nueva ventana para la

6
00:00:15,915 --> 00:00:19,370
‫cual podemos seleccionar una nueva imagen para cargar y luego, cuando

7
00:00:19,370 --> 00:00:21,380
‫hacemos clic en este botón

8
00:00:21,380 --> 00:00:23,990
‫y enviamos un formulario, por supuesto, queremos cargar

9
00:00:23,990 --> 00:00:27,520
‫esa imagen en nuestro backend y actualizar el usuario. , Derecha.

10
00:00:27,520 --> 00:00:29,528
‫Entonces, el primer paso para

11
00:00:29,528 --> 00:00:33,400
‫hacerlo será agregar un nuevo elemento de entrada a nuestro html.

12
00:00:33,400 --> 00:00:35,490
‫Básicamente, a nuestra plantilla de paquete, que

13
00:00:35,490 --> 00:00:37,850
‫luego permitirá que se abra ese selector de

14
00:00:37,850 --> 00:00:39,503
‫archivos cuando hagamos clic aquí.

15
00:00:40,930 --> 00:00:43,800
‫Entonces, vayamos a nuestras vistas y

16
00:00:43,800 --> 00:00:48,800
‫a la cuenta, y es este formulario donde ahora tenemos

17
00:00:49,010 --> 00:00:51,720
‫que agregar esa entrada.

18
00:00:51,720 --> 00:00:55,420
‫Así que ahora mismo tenemos ese enlace aquí que dice nueva foto.

19
00:00:55,420 --> 00:00:58,800
‫Pero, por supuesto, no es un enlace que vamos a utilizar.

20
00:00:58,800 --> 00:01:01,280
‫Así que esto fue solo un marcador de posición.

21
00:01:01,280 --> 00:01:03,360
‫Y así, eliminémoslo.

22
00:01:03,360 --> 00:01:05,063
‫Entonces, lo que necesitamos es una entrada.

23
00:01:06,280 --> 00:01:07,803
‫Desactivado para escribir archivo.

24
00:01:09,955 --> 00:01:13,110
‫Muy bien, antes, para el nombre teníamos una

25
00:01:13,110 --> 00:01:15,980
‫entrada con el tipo de texto.

26
00:01:15,980 --> 00:01:19,040
‫También tenemos entrada con el tipo de

27
00:01:19,040 --> 00:01:22,925
‫correo electrónico y también hay algunos especiales para la contraseña.

28
00:01:22,925 --> 00:01:26,210
‫Entonces, ingrese la contraseña y, por lo tanto,

29
00:01:26,210 --> 00:01:30,283
‫para los archivos, por supuesto, hay una para los archivos.

30
00:01:31,380 --> 00:01:35,263
‫Luego podemos especificar qué tipo de archivo aceptamos realmente.

31
00:01:38,920 --> 00:01:40,950
‫Y podemos hacer algo como esto.

32
00:01:40,950 --> 00:01:43,410
‫Imagen y luego todos ellos.

33
00:01:43,410 --> 00:01:46,210
‫Entonces, básicamente, todos los formatos obtienen sus imágenes, por lo

34
00:01:46,210 --> 00:01:49,010
‫que aquí se aceptan los que tienen un tipo de

35
00:01:49,010 --> 00:01:50,823
‫mente que comienza con una imagen.

36
00:01:53,054 --> 00:01:55,780
‫Ahora démosle también a esto aquí un

37
00:01:55,780 --> 00:01:59,930
‫nombre de clase para que aparezca bien formateado en nuestra página.

38
00:01:59,930 --> 00:02:03,660
‫Y este es el nombre de la clase que tengo en mi css.

39
00:02:03,660 --> 00:02:06,940
‫Y ahora también le damos una ID para que luego podamos

40
00:02:06,940 --> 00:02:08,440
‫seleccionarlo en el script java.

41
00:02:09,300 --> 00:02:12,690
‫Agregue eso como foto y finalmente al igual que

42
00:02:12,690 --> 00:02:15,840
‫los otros campos, también le damos un nombre.

43
00:02:15,840 --> 00:02:20,420
‫Así que el nombre de la foto también.

44
00:02:20,420 --> 00:02:23,093
‫Y, por supuesto, es foto porque ese es el

45
00:02:23,093 --> 00:02:25,680
‫nombre que tenemos en nuestro documento de

46
00:02:25,680 --> 00:02:29,063
‫usuario y también es el nombre de campo que espera multer.

47
00:02:30,106 --> 00:02:34,410
‫Así que aquí se carga y luego también le especificamos

48
00:02:34,410 --> 00:02:35,483
‫una etiqueta.

49
00:02:37,650 --> 00:02:40,293
‫Y lo configuramos en cuatro y

50
00:02:40,293 --> 00:02:44,110
‫luego el ID del elemento de entrada, está bien.

51
00:02:44,110 --> 00:02:45,570
‫Así que no estoy seguro

52
00:02:45,570 --> 00:02:47,890
‫de si está familiarizado con cómo funciona eso en

53
00:02:47,890 --> 00:02:49,640
‫html, pero tampoco es realmente importante.

54
00:02:51,329 --> 00:02:53,600
‫Entonces, la forma en que sucede es que

55
00:02:53,600 --> 00:02:56,320
‫cuando hacemos clic en esta etiqueta aquí, en realidad activará

56
00:02:56,320 --> 00:02:58,610
‫el elemento de entrada que tiene la ID

57
00:02:58,610 --> 00:03:00,500
‫que especificamos aquí en el formulario.

58
00:03:00,500 --> 00:03:03,870
‫Y en ese caso esa es la foto, está bien.

59
00:03:03,870 --> 00:03:05,343
‫Y en realidad es

60
00:03:05,343 --> 00:03:09,403
‫esta etiqueta aquí la que hará que el texto elija una nueva foto.

61
00:03:11,030 --> 00:03:12,950
‫Y así, cuando hagamos clic en

62
00:03:12,950 --> 00:03:14,597
‫la etiqueta, activará esta

63
00:03:14,597 --> 00:03:16,830
‫entrada que a su vez abrirá la ventana

64
00:03:16,830 --> 00:03:18,913
‫desde la que podemos seleccionar un archivo.

65
00:03:20,060 --> 00:03:23,090
‫Y eso es todo lo que necesitamos hacer para la entrada aquí.

66
00:03:23,090 --> 00:03:26,290
‫Ahora, como antes, hay dos formas posibles de

67
00:03:26,290 --> 00:03:28,710
‫enviar estos datos al servidor.

68
00:03:28,710 --> 00:03:31,480
‫Primero, sin la API como hicimos en

69
00:03:31,480 --> 00:03:32,840
‫una conferencia anterior.

70
00:03:32,840 --> 00:03:35,470
‫Ya encontramos la acción que queremos realizar

71
00:03:35,470 --> 00:03:37,370
‫y también el método.

72
00:03:37,370 --> 00:03:38,760
‫Y con eso,

73
00:03:38,760 --> 00:03:41,180
‫los datos se envían directamente al servidor.

74
00:03:41,180 --> 00:03:43,130
‫Ahora, si quisiéramos enviar un

75
00:03:43,130 --> 00:03:45,440
‫archivo usando este método, necesitaríamos especificar

76
00:03:45,440 --> 00:03:47,220
‫otra opción aquí.

77
00:03:47,220 --> 00:03:49,801
‫Y ese es el tipo enc.

78
00:03:49,801 --> 00:03:54,520
‫Por lo tanto, el tipo enc tendría que ser datos de formulario de varias partes.

79
00:03:54,520 --> 00:03:59,520
‫Entonces, datos de formulario de barra inclinada de varias partes, de acuerdo.

80
00:04:02,530 --> 00:04:06,090
‫Y aquí nuevamente, tenemos este nombre de varias partes.

81
00:04:06,090 --> 00:04:07,948
‫Y así, como dijimos antes,

82
00:04:07,948 --> 00:04:11,220
‫varias partes siempre son para enviar archivos al servidor.

83
00:04:11,220 --> 00:04:13,864
‫Y nuevamente, realmente necesitamos el middleware multer para

84
00:04:13,864 --> 00:04:17,164
‫manejar estos datos de formulario de varias partes, de acuerdo.

85
00:04:17,164 --> 00:04:20,650
‫Y en realidad, el nombre multer proviene de varias partes.

86
00:04:20,650 --> 00:04:23,317
‫Así que mult, multer, está bien.

87
00:04:23,317 --> 00:04:26,830
‫De todos modos, nuevamente, si quisiéramos enviar los datos

88
00:04:26,830 --> 00:04:29,320
‫sin una API, siempre tendríamos que especificar

89
00:04:29,320 --> 00:04:31,200
‫este tipo de enc.

90
00:04:31,200 --> 00:04:33,740
‫De lo contrario, el formulario simplemente ignoraría el archivo

91
00:04:33,740 --> 00:04:35,623
‫y no lo enviaría, está bien.

92
00:04:35,623 --> 00:04:38,370
‫Pero como ya sabemos, en

93
00:04:38,370 --> 00:04:41,780
‫realidad lo estamos usando con la API, ¿verdad?

94
00:04:41,780 --> 00:04:44,727
‫Y entonces no necesitamos especificar

95
00:04:44,727 --> 00:04:48,630
‫este tipo enc pero tendremos que hacerlo programáticamente.

96
00:04:48,630 --> 00:04:51,382
‫Y así que realmente hagamos eso.

97
00:04:51,382 --> 00:04:54,180
‫Así que ahora enviemos nuestros datos, incluida, por supuesto,

98
00:04:54,180 --> 00:04:56,920
‫la foto haciendo una llamada a la

99
00:04:56,920 --> 00:04:59,970
‫API, como lo hemos estado haciendo en la última sección.

100
00:04:59,970 --> 00:05:04,100
‫Y entonces necesitamos abrir ahora en nuestra carpeta pública y

101
00:05:04,100 --> 00:05:08,973
‫desde su js, abrimos index. js.

102
00:05:10,360 --> 00:05:13,560
‫Y aquí es donde realmente enviamos

103
00:05:13,560 --> 00:05:17,010
‫los datos para actualizarlos en el servidor.

104
00:05:17,010 --> 00:05:19,260
‫Bueno, en realidad no los

105
00:05:19,260 --> 00:05:21,960
‫enviamos aquí, pero los seleccionamos del formulario y

106
00:05:21,960 --> 00:05:24,790
‫luego los pasamos a la configuración de actualización.

107
00:05:24,790 --> 00:05:27,260
‫Muy bien, pero ¿recuerdas cómo dije

108
00:05:27,260 --> 00:05:29,590
‫que necesitábamos recrear programáticamente

109
00:05:29,590 --> 00:05:32,660
‫datos de un formulario de varias partes?

110
00:05:32,660 --> 00:05:34,893
‫Y entonces tenemos que hacerlo así.

111
00:05:42,020 --> 00:05:46,740
‫Llamémoslo formulario y luego nuevos datos de formulario.

112
00:05:48,580 --> 00:05:51,200
‫Muy bien, y ahora en

113
00:05:51,200 --> 00:05:53,883
‫ese formulario debemos seguir agregando nuevos datos.

114
00:05:53,883 --> 00:05:57,152
‫Y básicamente un anexo para cada uno de los

115
00:05:57,152 --> 00:05:59,143
‫datos que queremos enviar.

116
00:06:00,370 --> 00:06:04,400
‫Así que forma. añadir y el primero es el nombre.

117
00:06:04,400 --> 00:06:08,250
‫Entonces especificamos el nombre aquí y luego el valor del nombre.

118
00:06:08,250 --> 00:06:11,000
‫Y ese es, por supuesto, este.

119
00:06:11,000 --> 00:06:15,363
‫Así que tomemos eso, péguelo aquí y duplíquelo.

120
00:06:16,870 --> 00:06:19,653
‫Y el siguiente es el correo electrónico, está bien.

121
00:06:20,690 --> 00:06:24,580
‫Entonces vamos a deshacernos de esta entrada en la configuración de actualización.

122
00:06:24,580 --> 00:06:28,040
‫Luego pasamos el formulario, está bien.

123
00:06:28,040 --> 00:06:30,560
‫Y o una llamada de texto

124
00:06:30,560 --> 00:06:32,350
‫usando axios reconocerá

125
00:06:32,350 --> 00:06:34,480
‫este formulario aquí como un

126
00:06:34,480 --> 00:06:37,550
‫objeto y funcionará igual que antes, de acuerdo.

127
00:06:37,550 --> 00:06:39,900
‫Entonces, aquí, en la configuración de

128
00:06:39,900 --> 00:06:42,178
‫actualización, donde pasamos los

129
00:06:42,178 --> 00:06:44,980
‫datos, que luego se pasan aquí a la

130
00:06:44,980 --> 00:06:47,543
‫solicitud de axios, no necesitamos cambiar nada.

131
00:06:49,090 --> 00:06:51,810
‫Muy bien, esto es equivalente a lo que teníamos

132
00:06:51,810 --> 00:06:54,380
‫antes con nombre y correo electrónico, pero ahora,

133
00:06:54,380 --> 00:06:57,050
‫por supuesto, agreguemos también la foto, que es

134
00:06:57,050 --> 00:06:59,380
‫la razón por la que ahora tenemos

135
00:06:59,380 --> 00:07:00,580
‫que hacerlo así.

136
00:07:02,590 --> 00:07:07,590
‫Así que forma. anexar nuevamente entonces el nombre que

137
00:07:07,650 --> 00:07:10,400
‫queremos darle es por supuesto nuevamente, foto y

138
00:07:12,093 --> 00:07:12,970
‫luego documento. getelementbyid

139
00:07:14,176 --> 00:07:17,860
‫que también es foto pero ahora no lo es. valor sino en su

140
00:07:20,530 --> 00:07:22,930
‫lugar. archivos, de acuerdo.

141
00:07:22,930 --> 00:07:25,920
‫Y estos archivos están

142
00:07:25,920 --> 00:07:28,170
‫en realidad en una matriz y, como

143
00:07:28,170 --> 00:07:30,260
‫solo hay uno, tenemos que seleccionar

144
00:07:30,260 --> 00:07:33,260
‫ese primer elemento en la matriz y eso es cero.

145
00:07:33,260 --> 00:07:34,733
‫Muy bien, y

146
00:07:36,880 --> 00:07:40,810
‫registremos este formulario en la consola hasta que veamos rápidamente

147
00:07:40,810 --> 00:07:42,340
‫qué es este formulario.

148
00:07:43,360 --> 00:07:45,870
‫Pero en pocas palabras, como dije antes, básicamente recreamos

149
00:07:45,870 --> 00:07:48,280
‫estos datos de formulario de varias partes.

150
00:07:48,280 --> 00:07:52,480
‫Y esa es la razón por la que se llama datos de formulario

151
00:07:52,480 --> 00:07:55,200
‫porque, bueno, esos datos de formulario también

152
00:07:55,200 --> 00:07:58,640
‫están aquí en este tipo enc de varias partes, de acuerdo.

153
00:07:58,640 --> 00:08:02,173
‫Entonces, supongo que eso es suficiente para

154
00:08:03,750 --> 00:08:06,450
‫que ahora probemos esto.

155
00:08:06,450 --> 00:08:08,670
‫Entonces, como dije, en la configuración de actualización,

156
00:08:08,670 --> 00:08:10,860
‫no hay nada que debamos cambiar y

157
00:08:10,860 --> 00:08:13,030
‫también el punto final de actualización

158
00:08:13,030 --> 00:08:15,320
‫donde estamos enviando esta herramienta de solicitud, por

159
00:08:15,320 --> 00:08:18,630
‫lo que esta también ya está funcionando y lista para aceptar

160
00:08:18,630 --> 00:08:21,040
‫imágenes e incluso para cambiar su tamaño, correcto.

161
00:08:21,040 --> 00:08:25,230
‫Y ahora sigamos adelante e intentemos esto.

162
00:08:25,230 --> 00:08:28,319
‫Entonces recarguemos esto una vez más.

163
00:08:28,319 --> 00:08:32,050
‫Y entonces veamos, y de hecho

164
00:08:32,050 --> 00:08:36,031
‫ahora obtenemos nuestro selector de archivos básicamente.

165
00:08:36,031 --> 00:08:38,450
‫Entonces, esta ventana donde ahora podemos seleccionar

166
00:08:38,450 --> 00:08:40,550
‫el archivo y lo que voy

167
00:08:40,550 --> 00:08:42,370
‫a hacer es básicamente volver

168
00:08:42,370 --> 00:08:45,620
‫a colocar la imagen original que teníamos en este usuario.

169
00:08:45,620 --> 00:08:47,730
‫Eso es en el escritorio,

170
00:08:47,730 --> 00:08:52,513
‫natours, público, usuarios de imágenes, y era el usuario 11, así que este.

171
00:08:54,060 --> 00:08:58,700
‫Y eso ahora está subido.

172
00:08:58,700 --> 00:09:00,050
‫Por lo tanto, abra, guarde en la configuración y la actualización de datos se realizará correctamente.

173
00:09:01,940 --> 00:09:06,940
‫Ahora no se refleja aquí de inmediato.

174
00:09:07,780 --> 00:09:10,180
‫Ni aquí ni aquí, pero debería

175
00:09:10,180 --> 00:09:13,280
‫ser así una vez que carguemos esta página.

176
00:09:13,280 --> 00:09:15,393
‫Y, de hecho, también podríamos hacerlo

177
00:09:16,410 --> 00:09:19,540
‫con un script java, pero en realidad eso es mucho trabajo.

178
00:09:19,540 --> 00:09:21,620
‫Intenté hacerlo y lo hice,

179
00:09:21,620 --> 00:09:23,740
‫pero luego pensé que era demasiado

180
00:09:23,740 --> 00:09:26,800
‫trabajo y que no valía la pena implementarlo aquí.

181
00:09:26,800 --> 00:09:29,630
‫Pero de todos modos, solo para probar si realmente funcionó,

182
00:09:29,630 --> 00:09:32,040
‫ahora necesitamos volver a cargar la página.

183
00:09:32,040 --> 00:09:34,320
‫Y lo hizo.

184
00:09:34,320 --> 00:09:35,840
‫Aquí está ahora la nueva imagen que acabamos de subir.

185
00:09:35,840 --> 00:09:39,320
‫Que bien.

186
00:09:39,320 --> 00:09:41,450
‫Echemos un vistazo a la carpeta en sí.

187
00:09:41,450 --> 00:09:44,210
‫Si realmente está allí, también, y

188
00:09:44,210 --> 00:09:46,530
‫si se transformó correctamente.

189
00:09:46,530 --> 00:09:48,810
‫Entonces esa es una imagen.

190
00:09:48,810 --> 00:09:52,030
‫Vamos a recargarlo aquí.

191
00:09:52,030 --> 00:09:53,293
‫Y ahora no estoy seguro de cuál es.

192
00:09:57,240 --> 00:09:59,663
‫Ah, exactamente.

193
00:10:00,890 --> 00:10:02,690
‫Entonces 500 veces 500 y

194
00:10:02,690 --> 00:10:07,200
‫ahora que está completamente borroso porque la imagen original era mucho más pequeña.

195
00:10:07,200 --> 00:10:10,440
‫Pero no importa, eso no importa en absoluto.

196
00:10:10,440 --> 00:10:12,643
‫Lo que importa es

197
00:10:13,910 --> 00:10:17,570
‫que ahora podemos subir fotos directamente desde este formulario.

198
00:10:17,570 --> 00:10:19,830
‫Quiero que eso sea todo para

199
00:10:19,830 --> 00:10:22,480
‫echar un vistazo a nuestra consola aquí

200
00:10:22,480 --> 00:10:27,480
‫en los datos del formulario que pensé que habíamos registrado y no aparecieron aquí

201
00:10:27,546 --> 00:10:29,530
‫porque ya recargamos la página.

202
00:10:29,530 --> 00:10:32,184
‫Pero de todos modos, quería volver a poner la otra imagen aquí.

203
00:10:32,184 --> 00:10:36,543
‫Entonces, el que realmente cargamos antes, que está en

204
00:10:39,290 --> 00:10:41,820
‫dev-data, image y aarav.

205
00:10:41,820 --> 00:10:46,820
‫Muy bien, los datos se actualizaron correctamente.

206
00:10:50,040 --> 00:10:53,340
‫Echemos un vistazo rápido a los datos de nuestro teléfono aquí.

207
00:10:53,340 --> 00:10:56,760
‫Ah, pero supongo que realmente no podemos ver lo que tenemos aquí.

208
00:10:56,760 --> 00:11:00,173
‫Vamos a ver.

209
00:11:01,100 --> 00:11:02,223
‫No, realmente no podemos ver lo que tenemos.

210
00:11:04,045 --> 00:11:06,689
‫Bien, nunca eché un vistazo a esto.

211
00:11:06,689 --> 00:11:09,160
‫Y pensé que tal vez podríamos ver la información,

212
00:11:09,160 --> 00:11:10,110
‫pero no importa.

213
00:11:10,110 --> 00:11:12,850
‫Lo que importa es que realmente funcionó.

214
00:11:12,850 --> 00:11:16,170
‫Entonces, si recargamos ahora, entonces, por supuesto, esta imagen

215
00:11:16,170 --> 00:11:18,191
‫anterior está de vuelta.

216
00:11:18,191 --> 00:11:21,940
‫Impresionante, una vez más, esta aplicación está empezando a sentirse

217
00:11:21,940 --> 00:11:25,000
‫cada vez más como un trabajo real.