‫Narrador: En la primera parte de
‫esta sección aprenderemos todo sobre la carga de
‫imágenes con el paquete Multer y en este video en particular
‫comenzaremos a implementar la carga de imágenes para las fotos de los usuarios.
‫Pero antes de comenzar, hagamos una limpieza rápida
‫aquí y eliminemos esta salida constante de las
‫cookies que tenemos aquí.
‫Eso está en algún lugar aquí abajo y eso es mucho mejor.
‫Ahora vamos a estar trabajando en la carga de
‫fotos de usuarios y abramos aquí las rutas de los usuarios, de acuerdo.
‫Entonces, Multer es un middleware muy popular para manejar datos
‫de formularios de varias partes, que es un formulario en la codificación que
‫se usa para cargar archivos desde un formulario.
‫Así que recuerda cómo en la última
‫sección usamos un formulario codificado en URL para actualizar los datos del
‫usuario y para eso también tuvimos que incluir un middleware especial.
‫Multer es básicamente un software intermedio
‫para datos de formularios de varias partes.
‫Y ahora esto es lo que haremos.
‫Permitiremos que el usuario cargue una foto en
‫la ruta Actualizarme y, por lo
‫tanto, en lugar de solo poder actualizar el correo electrónico
‫y la foto, los usuarios también podrán cargar sus fotos de usuario.
‫Entonces, una vez más, comencemos por
‫instalar el paquete que necesitamos y, de hecho,
‫creemos una nueva ventana de terminal aquí para que NPM instale Multer.
‫Muy bien y aquí vemos que estamos en Multer 1. 4. 1.
‫Y nuevamente, en caso de que tenga algún
‫problema con este paquete, asegúrese de
‫instalar la misma versión que estoy usando aquí.
‫Está bien.
‫Entonces, incluyémoslo aquí.
‫Entonces Multer, requieres, Multer.
‫Entonces, fácil y ahora tenemos que configurar una carga
‫llamada Multer y luego usarla.
‫Y hagamos eso aquí mismo
‫al principio y llamémoslo Cargar y llamamos a la función Multer que acabamos
‫de incluir antes y luego pasamos un
‫objeto para algunas opciones.
‫Y por ahora, la única opción que
‫vamos a especificar es el
‫destino y lo estableceré en Público / imagen / usuarios, de acuerdo.
‫Y esa es exactamente la carpeta
‫donde queremos guardar todas las imágenes
‫que se están cargando.
‫Entonces eso es aquí, Público, Imagen y Usuarios, como todas las imágenes
‫de todos los usuarios que
‫ya tenemos en nuestra base de datos.
‫Bien y, por supuesto, podemos configurar esto de
‫una manera mucho más compleja y lo
‫haremos en nuestra próxima
‫conferencia, pero por ahora realmente quiero que nos presente
‫este paquete y, por cierto, podríamos
‫haber llamado la función Multer sin ninguna opción allí.
‫Entonces, sin esto aquí y luego, la imagen cargada simplemente se
‫almacenaría en la memoria y no se guardaría en
‫ningún lugar del disco, pero, por supuesto, en este punto eso no es lo
‫que queremos y, por lo tanto, al menos debemos especificar esta opción de destino.
‫Y con esto, nuestro archivo se carga
‫realmente en un directorio en nuestro sistema de archivos.
‫Y mencioné esto antes, pero asegurémonos de
‫que estamos en la misma página sobre esto, que
‫es que, por supuesto, las imágenes no se cargan directamente
‫en la base de datos, simplemente las cargamos en
‫nuestro sistema de archivos y luego en la base de
‫datos que poner un enlace básicamente a esa imagen.
‫Entonces, en este caso, en cada documento de
‫usuario, tendremos que nombrar todo el archivo cargado, está bien.
‫Nuevamente, no haremos eso en este video, pero
‫lo haremos un poco más tarde.
‫Por ahora hagamos que esto funcione.
‫De todos modos, lo que tenemos que hacer
‫ahora es usar esta carga aquí para crear realmente una función
‫de middleware que podamos poner aquí en la ruta Actualizarme.
‫Entonces aquí, y funciona así.
‫Así que sube, haz un punto único, y es único porque aquí
‫solo queremos actualizar una sola imagen y luego aquí en
‫single pasamos el nombre del campo que va a
‫contener la imagen para subir.
‫Y esa será una foto, está bien.
‫Y con campo me refiero al campo en el
‫formulario en el que se va a cargar la imagen.
‫Está bien, ¿tiene sentido?
‫Entonces, nuevamente, incluimos el paquete Multer y
‫luego con eso creamos una carga.
‫Y esta carga es solo para definir un par
‫de configuraciones donde en este ejemplo solo definimos el destino, luego
‫usamos esa carga para crear un nuevo middleware que luego
‫podemos agregar a esta pila de la ruta que
‫queremos usar para cargar el archivo .
‫Entonces para eso decimos upload dot single porque
‫solo tenemos un solo archivo
‫y luego finalmente especificamos el nombre del campo
‫que va a contener este archivo.
‫Bien, entonces este middleware se encargará de
‫tomar el archivo y básicamente copiarlo
‫al destino que especificamos.
‫Y luego, por supuesto, llamará al
‫siguiente middleware de la pila, que es Update Me.
‫Además, este middleware colocará el archivo o al menos
‫alguna información sobre el archivo
‫en el objeto de solicitud, así
‫que echemos un vistazo a eso.
‫Así que vayamos a la función Actualizarme.
‫Entonces, aquí y aquí al principio, digamos
‫registro de puntos de la consola, archivo de puntos de registro.
‫¿Está bien?
‫Y también quiero echarle un vistazo al cuerpo.
‫Genial y con esto ahora estamos realmente
‫listos para probar esto y por ahora lo probaremos en
‫cartero pero, por supuesto, más
‫adelante también agregaremos esta funcionalidad al formulario, de acuerdo.
‫Así que vayamos al cartero aquí y a Actualizarme.
‫Básicamente, para actualizar el usuario actual.
‫Y el usuario que quiero actualizar se llama Leo, así
‫que traigámoslo aquí de Compass, o en realidad creo que
‫ni siquiera es necesario porque en nuestro inicio de
‫sesión ya tenemos este tipo de dirección de correo electrónico y su
‫correo electrónico es leo @ example. com y la
‫contraseña es siempre la misma.
‫Y entonces, por supuesto, primero debemos iniciar sesión como usuario
‫y ahora sigamos adelante y luego actualice al usuario.
‫Entonces en el cuerpo tenemos el nombre y el rol.
‫Así que solo actualice, digamos el nombre aquí.
‫Entonces, el nombre actual es Leo Gillespie o Gillespie, no estoy seguro
‫de cómo decirlo.
‫Agreguemos algo aquí en el medio, está bien.
‫Y ahora, finalmente, especificamos la propiedad de la foto, o
‫en realidad no deberíamos hacerlo así, sino que deberíamos
‫ir aquí a los datos del formulario, está bien, porque esta es la forma
‫en que podemos enviar
‫datos del formulario de varias partes, de acuerdo.
‫Entonces, copiemos solo el nombre aquí y es Nombre.
‫Muy bien, aquí la clave es Nombre y
‫luego el valor es este.
‫A continuación, finalmente especificamos el campo de la foto y
‫luego aquí podemos especificar lo que queremos.
‫Entonces, en lugar de texto, que es
‫el predeterminado, podemos especificar el archivo y luego aquí podemos seleccionar el
‫archivo que queremos cargar.
‫Entonces ese archivo, esa imagen, está aquí en nuestros datos de definición nuevamente, luego en
‫la imagen y luego aquí la imagen de Leo.
‫Y por eso muestra a este usuario.
‫Bien, haga clic en Abrir y ahora creo que
‫estamos listos para enviar esa solicitud.
‫Muy bien, tuvimos éxito y, por supuesto, como dije antes, la foto obviamente
‫no se actualizó aquí en la salida de la base de datos
‫porque eso es para la próxima conferencia.
‫Por ahora solo queremos subir realmente esta imagen
‫a esa carpeta que especificamos.
‫Muy bien, ahora también echemos un vistazo aquí a nuestra salida y
‫aquí tenemos el archivo de punto de solicitud, que es este, y
‫obtenemos todo tipo de información al respecto.
‫Entonces, el nombre original, el destino que especificamos, el nuevo nombre
‫de archivo aquí y también el tamaño.
‫De acuerdo, ese es el archivo de solicitud de puntos y luego
‫recuerde que también registramos el cuerpo.
‫Y entonces el cuerpo ahora es solo el nombre, de acuerdo.
‫Entonces, nuestro análisis de cuerpo no es realmente capaz de manejar
‫archivos y por eso el archivo no aparece
‫en el cuerpo en absoluto y,
‫por supuesto, esa es la razón por la que realmente necesitamos el paquete Multer.
‫De todos modos, ahora echemos un vistazo a nuestra carpeta y
‫aquí tenemos la imagen, los usuarios, y luego en algún lugar aquí debería estar
‫la imagen que acabamos de cargar, pero
‫realmente no puedo verla aquí.
‫Actualicemos, ah y de hecho aquí está.
‫Entonces, si hacemos clic en él ahora, realmente no
‫podemos verlo porque, como puede
‫ver aquí, ni siquiera tiene una extensión, está bien.
‫Y es por eso que realmente no podemos abrirlo en este momento.
‫Entonces, el archivo realmente apareció aquí en nuestra carpeta y, por
‫lo tanto, tenemos la carga realmente funcionando.
‫Bueno, al menos un poco, pero no
‫estamos realmente donde lo queremos, ¿verdad?
‫Así que queremos darle un mejor nombre de
‫archivo y también queremos reorganizar un
‫poco este código que tenemos en este punto.
‫Y hagámoslo en el siguiente video.