‫Conferencista: Permitamos ahora que los
‫usuarios carguen sus fotos directamente en nuestro sitio web.
‫Y esto es lo que queremos.
‫Cuando hacemos clic aquí, básicamente queremos
‫abrir una nueva ventana para la
‫cual podemos seleccionar una nueva imagen para cargar y luego, cuando
‫hacemos clic en este botón
‫y enviamos un formulario, por supuesto, queremos cargar
‫esa imagen en nuestro backend y actualizar el usuario. , Derecha.
‫Entonces, el primer paso para
‫hacerlo será agregar un nuevo elemento de entrada a nuestro html.
‫Básicamente, a nuestra plantilla de paquete, que
‫luego permitirá que se abra ese selector de
‫archivos cuando hagamos clic aquí.
‫Entonces, vayamos a nuestras vistas y
‫a la cuenta, y es este formulario donde ahora tenemos
‫que agregar esa entrada.
‫Así que ahora mismo tenemos ese enlace aquí que dice nueva foto.
‫Pero, por supuesto, no es un enlace que vamos a utilizar.
‫Así que esto fue solo un marcador de posición.
‫Y así, eliminémoslo.
‫Entonces, lo que necesitamos es una entrada.
‫Desactivado para escribir archivo.
‫Muy bien, antes, para el nombre teníamos una
‫entrada con el tipo de texto.
‫También tenemos entrada con el tipo de
‫correo electrónico y también hay algunos especiales para la contraseña.
‫Entonces, ingrese la contraseña y, por lo tanto,
‫para los archivos, por supuesto, hay una para los archivos.
‫Luego podemos especificar qué tipo de archivo aceptamos realmente.
‫Y podemos hacer algo como esto.
‫Imagen y luego todos ellos.
‫Entonces, básicamente, todos los formatos obtienen sus imágenes, por lo
‫que aquí se aceptan los que tienen un tipo de
‫mente que comienza con una imagen.
‫Ahora démosle también a esto aquí un
‫nombre de clase para que aparezca bien formateado en nuestra página.
‫Y este es el nombre de la clase que tengo en mi css.
‫Y ahora también le damos una ID para que luego podamos
‫seleccionarlo en el script java.
‫Agregue eso como foto y finalmente al igual que
‫los otros campos, también le damos un nombre.
‫Así que el nombre de la foto también.
‫Y, por supuesto, es foto porque ese es el
‫nombre que tenemos en nuestro documento de
‫usuario y también es el nombre de campo que espera multer.
‫Así que aquí se carga y luego también le especificamos
‫una etiqueta.
‫Y lo configuramos en cuatro y
‫luego el ID del elemento de entrada, está bien.
‫Así que no estoy seguro
‫de si está familiarizado con cómo funciona eso en
‫html, pero tampoco es realmente importante.
‫Entonces, la forma en que sucede es que
‫cuando hacemos clic en esta etiqueta aquí, en realidad activará
‫el elemento de entrada que tiene la ID
‫que especificamos aquí en el formulario.
‫Y en ese caso esa es la foto, está bien.
‫Y en realidad es
‫esta etiqueta aquí la que hará que el texto elija una nueva foto.
‫Y así, cuando hagamos clic en
‫la etiqueta, activará esta
‫entrada que a su vez abrirá la ventana
‫desde la que podemos seleccionar un archivo.
‫Y eso es todo lo que necesitamos hacer para la entrada aquí.
‫Ahora, como antes, hay dos formas posibles de
‫enviar estos datos al servidor.
‫Primero, sin la API como hicimos en
‫una conferencia anterior.
‫Ya encontramos la acción que queremos realizar
‫y también el método.
‫Y con eso,
‫los datos se envían directamente al servidor.
‫Ahora, si quisiéramos enviar un
‫archivo usando este método, necesitaríamos especificar
‫otra opción aquí.
‫Y ese es el tipo enc.
‫Por lo tanto, el tipo enc tendría que ser datos de formulario de varias partes.
‫Entonces, datos de formulario de barra inclinada de varias partes, de acuerdo.
‫Y aquí nuevamente, tenemos este nombre de varias partes.
‫Y así, como dijimos antes,
‫varias partes siempre son para enviar archivos al servidor.
‫Y nuevamente, realmente necesitamos el middleware multer para
‫manejar estos datos de formulario de varias partes, de acuerdo.
‫Y en realidad, el nombre multer proviene de varias partes.
‫Así que mult, multer, está bien.
‫De todos modos, nuevamente, si quisiéramos enviar los datos
‫sin una API, siempre tendríamos que especificar
‫este tipo de enc.
‫De lo contrario, el formulario simplemente ignoraría el archivo
‫y no lo enviaría, está bien.
‫Pero como ya sabemos, en
‫realidad lo estamos usando con la API, ¿verdad?
‫Y entonces no necesitamos especificar
‫este tipo enc pero tendremos que hacerlo programáticamente.
‫Y así que realmente hagamos eso.
‫Así que ahora enviemos nuestros datos, incluida, por supuesto,
‫la foto haciendo una llamada a la
‫API, como lo hemos estado haciendo en la última sección.
‫Y entonces necesitamos abrir ahora en nuestra carpeta pública y
‫desde su js, abrimos index. js.
‫Y aquí es donde realmente enviamos
‫los datos para actualizarlos en el servidor.
‫Bueno, en realidad no los
‫enviamos aquí, pero los seleccionamos del formulario y
‫luego los pasamos a la configuración de actualización.
‫Muy bien, pero ¿recuerdas cómo dije
‫que necesitábamos recrear programáticamente
‫datos de un formulario de varias partes?
‫Y entonces tenemos que hacerlo así.
‫Llamémoslo formulario y luego nuevos datos de formulario.
‫Muy bien, y ahora en
‫ese formulario debemos seguir agregando nuevos datos.
‫Y básicamente un anexo para cada uno de los
‫datos que queremos enviar.
‫Así que forma. añadir y el primero es el nombre.
‫Entonces especificamos el nombre aquí y luego el valor del nombre.
‫Y ese es, por supuesto, este.
‫Así que tomemos eso, péguelo aquí y duplíquelo.
‫Y el siguiente es el correo electrónico, está bien.
‫Entonces vamos a deshacernos de esta entrada en la configuración de actualización.
‫Luego pasamos el formulario, está bien.
‫Y o una llamada de texto
‫usando axios reconocerá
‫este formulario aquí como un
‫objeto y funcionará igual que antes, de acuerdo.
‫Entonces, aquí, en la configuración de
‫actualización, donde pasamos los
‫datos, que luego se pasan aquí a la
‫solicitud de axios, no necesitamos cambiar nada.
‫Muy bien, esto es equivalente a lo que teníamos
‫antes con nombre y correo electrónico, pero ahora,
‫por supuesto, agreguemos también la foto, que es
‫la razón por la que ahora tenemos
‫que hacerlo así.
‫Así que forma. anexar nuevamente entonces el nombre que
‫queremos darle es por supuesto nuevamente, foto y
‫luego documento. getelementbyid
‫que también es foto pero ahora no lo es. valor sino en su
‫lugar. archivos, de acuerdo.
‫Y estos archivos están
‫en realidad en una matriz y, como
‫solo hay uno, tenemos que seleccionar
‫ese primer elemento en la matriz y eso es cero.
‫Muy bien, y
‫registremos este formulario en la consola hasta que veamos rápidamente
‫qué es este formulario.
‫Pero en pocas palabras, como dije antes, básicamente recreamos
‫estos datos de formulario de varias partes.
‫Y esa es la razón por la que se llama datos de formulario
‫porque, bueno, esos datos de formulario también
‫están aquí en este tipo enc de varias partes, de acuerdo.
‫Entonces, supongo que eso es suficiente para
‫que ahora probemos esto.
‫Entonces, como dije, en la configuración de actualización,
‫no hay nada que debamos cambiar y
‫también el punto final de actualización
‫donde estamos enviando esta herramienta de solicitud, por
‫lo que esta también ya está funcionando y lista para aceptar
‫imágenes e incluso para cambiar su tamaño, correcto.
‫Y ahora sigamos adelante e intentemos esto.
‫Entonces recarguemos esto una vez más.
‫Y entonces veamos, y de hecho
‫ahora obtenemos nuestro selector de archivos básicamente.
‫Entonces, esta ventana donde ahora podemos seleccionar
‫el archivo y lo que voy
‫a hacer es básicamente volver
‫a colocar la imagen original que teníamos en este usuario.
‫Eso es en el escritorio,
‫natours, público, usuarios de imágenes, y era el usuario 11, así que este.
‫Y eso ahora está subido.
‫Por lo tanto, abra, guarde en la configuración y la actualización de datos se realizará correctamente.
‫Ahora no se refleja aquí de inmediato.
‫Ni aquí ni aquí, pero debería
‫ser así una vez que carguemos esta página.
‫Y, de hecho, también podríamos hacerlo
‫con un script java, pero en realidad eso es mucho trabajo.
‫Intenté hacerlo y lo hice,
‫pero luego pensé que era demasiado
‫trabajo y que no valía la pena implementarlo aquí.
‫Pero de todos modos, solo para probar si realmente funcionó,
‫ahora necesitamos volver a cargar la página.
‫Y lo hizo.
‫Aquí está ahora la nueva imagen que acabamos de subir.
‫Que bien.
‫Echemos un vistazo a la carpeta en sí.
‫Si realmente está allí, también, y
‫si se transformó correctamente.
‫Entonces esa es una imagen.
‫Vamos a recargarlo aquí.
‫Y ahora no estoy seguro de cuál es.
‫Ah, exactamente.
‫Entonces 500 veces 500 y
‫ahora que está completamente borroso porque la imagen original era mucho más pequeña.
‫Pero no importa, eso no importa en absoluto.
‫Lo que importa es
‫que ahora podemos subir fotos directamente desde este formulario.
‫Quiero que eso sea todo para
‫echar un vistazo a nuestra consola aquí
‫en los datos del formulario que pensé que habíamos registrado y no aparecieron aquí
‫porque ya recargamos la página.
‫Pero de todos modos, quería volver a poner la otra imagen aquí.
‫Entonces, el que realmente cargamos antes, que está en
‫dev-data, image y aarav.
‫Muy bien, los datos se actualizaron correctamente.
‫Echemos un vistazo rápido a los datos de nuestro teléfono aquí.
‫Ah, pero supongo que realmente no podemos ver lo que tenemos aquí.
‫Vamos a ver.
‫No, realmente no podemos ver lo que tenemos.
‫Bien, nunca eché un vistazo a esto.
‫Y pensé que tal vez podríamos ver la información,
‫pero no importa.
‫Lo que importa es que realmente funcionó.
‫Entonces, si recargamos ahora, entonces, por supuesto, esta imagen
‫anterior está de vuelta.
‫Impresionante, una vez más, esta aplicación está empezando a sentirse
‫cada vez más como un trabajo real.