En la lección anterior,
hemos aprendido cómo se
soportan las cargas de archivos mediante el enfoque de datos multiplataforma.
En este ejercicio, vamos a hacer uso del módulo Multer, al
que nos referimos en la conferencia para permitir que nuestro servidor express
admita la carga de archivos de imagen en nuestro sitio del servidor.
Almacenarán estos archivos de imágenes en la carpeta público/images.
Estas imágenes serían útiles dentro de nuestra aplicación cuando suministramos
imágenes para los diversos platos o los radares o las promociones,
que hemos construido en nuestro servidor REST API.
Para empezar con este ejercicio,
el primer paso, por supuesto,
es instalar el módulo Multer para que en el mensaje escriba npm instale
multer menos guardar y por el momento estoy usando multer 1.3.1 en este curso.
Así que una vez instalado el módulo multer,
vamos a nuestro proyecto e implementamos una nueva ruta que nos permita subir archivos.
Vaya al proyecto en la carpeta de rutas,
agreguemos un nuevo archivo llamado upload router.js.
Este router, router express que vamos a implementar aquí,
es el que va a soportar la carga de los archivos.
Por lo tanto, en el enrutador de carga déjame ir
al enrutador de platos y copiar estas primeras cosas del enrutador de platos
porque vamos a configurar una
estructura similar en nuestra aplicación o en el enrutador de carga.
Así que, déjame copiar esa parte y luego editaremos eso.
Entonces, en el enrutador de carga,
no necesito mangosta, así que voy a quitar la mangosta y tampoco necesito los platos.
Por lo tanto, esos dos serían eliminados y después de eso
necesitamos expresar analizador de cuerpo y autenticar.
Ahora, voy a requerir el módulo multer aquí.
Una vez que incluimos el módulo multer,
ahora este enrutador voy a llamar a esto como enrutador de carga.
Por lo tanto, dirán cargar enrutador use analizador corporal y
luego este pero el enrutador de carga y de nuevo,
recuerde decir exportaciones de módulos, cargar enrutador aquí.
Por lo tanto, para la ruta de subida de enrutadores,
necesitamos agregar los diversos métodos.
Voy a hacer eso un poco más tarde, pero antes de eso vamos a configurar
multer para que podamos subir los archivos.
Ahora, por defecto, multer se puede configurar simplemente usando multer dentro de nuestra aplicación,
pero voy a hacer alguna configuración de multer en
este ejercicio para que vamos
a personalizar la forma en que Multer maneja la carga de los archivos.
Por lo tanto, para usar el multer,
una de las opciones que toma multer es para el almacenamiento.
Por lo tanto, Multer proporciona esta función de almacenamiento
en disco que nos permite definir el motor de almacenamiento y aquí podemos configurar algunas cosas.
Ahora, si solo se trata de configurar el destino,
simplemente puede decir dos puntos
y luego especificar la carpeta de destino dentro de la cual se almacenarán los archivos cargados.
Pero aquí voy a hacer alguna configuración adicional para el módulo multer aquí.
Por lo tanto, aquí es donde voy a usar el soporte de almacenamiento en disco múltiple.
Dentro del almacenamiento en disco,
puedo definir un par de opciones aquí.
Las opciones que voy a definir van a ser
destino y la segunda es el nombre del archivo.
Por lo tanto, dos configuraciones que voy a suministrar al almacenamiento en disco.
El destino como cabría esperar,
me permite configurar el destino y esto toma
como configuración aquí una función aquí.
Por lo tanto, el destino se configura como una función aquí.
Esta función recibirá solicitud y también un objeto llamado el archivo,
que contiene información sobre el archivo que ha
sido procesado por multer y también una función de devolución de llamada.
Entonces, cb es la función de devolución de llamada.
Entonces, aquí para el destino,
voy a decir cb null,
el segundo parámetro es la carpeta de destino,
que se puede expresar como una cadena donde se almacenarán los archivos.
Así que, aquí, voy a suministrar el destino como imágenes de barra pública.
Porque en este ejercicio voy a admitir subidas de imágenes.
Por lo tanto, esa es la parte que voy a especificar aquí, por lo que la carga de la imagen.
Por lo tanto, la función de devolución de llamada como ve toma dos parámetros.
El primero es, por supuesto,
el error que en este caso voy a establecerlo en
nulo y el segundo es la carpeta de destino,
donde se almacenarán mis imágenes.
Por lo tanto, puedo configurar eso diciendo imágenes de barra diagonal pública.
Entonces, en la carpeta de imágenes,
los archivos que subo se almacenarán.
Para el nombre de archivo también,
obtiene los tres parámetros,
mensaje de solicitud, archivo y la función de devolución de llamada.
A partir de la configuración de la forma en que se llama la función de devolución de llamada,
podemos especificar información sobre el nombre del archivo.
Entonces, para la función de devolución de llamada diría cb null y no hay error aquí.
Luego, el segundo insiste en el nombre del archivo,
que se va a usar para el archivo específico que acaba de
ser subido, cómo se va a almacenar.
Entonces, este objeto de archivo que obtuve aquí,
admite un conjunto de varias propiedades en él.
Una de las propiedades se llama, nombre original.
Por lo tanto, el nombre original esencialmente,
nos da el nombre original del archivo desde el lado del cliente que se ha subido.
Insisto en que, cuando el archivo se guarda en el lado
del servidor, se le dará exactamente el
mismo nombre que el nombre original del archivo que se ha subido.
Para que pueda saber que estoy cargando
exactamente el mismo archivo y en el lado del servidor cuando se
carga el archivo se almacenará con el mismo nombre.
Ahora, si no configura esto entonces,
multer por defecto dará alguna cadena aleatoria
como el nombre del archivo sin extensiones.
Por lo tanto, eso puede no ser algo que usted estaría feliz
de usar en este ejercicio en particular.
Por lo tanto, es por eso que estoy configurando explícitamente diciendo que,
el archivo debe almacenarse con el nombre original del archivo que se ha subido.
Volveremos a encontrar este objeto de archivo con
un poco más de detalle y veremos cómo
podemos hacer uso de la información del objeto de archivo un poco más tarde.
Además, también puedo especificar un filtro de archivos aquí para la configuración de multers.
El filtro de archivos me permitirá especificar qué tipo de archivos
estoy dispuesto a cargar o que estoy dispuesto a aceptar para cargarlos.
Entonces, para hacer esto configuraré otra función llamada
filtro de archivos de imagen const
y esta definiré la función en un minuto.
Ahora, para esto, también puedo guardar esto como
almacenamiento const porque hemos estado usando const para todo,
así que, solo diré almacenamiento const.
Para el filtro de archivo de imagen,
diré filtro de archivo de imagen const.
Una vez más, recibe tres parámetros de solicitud,
objeto, el objeto de archivo que contiene la información sobre
el archivo que se ha cargado y la función de devolución de llamada aquí.
A través de la función de devolución de
llamada, volveré la información a mi configuración de multer que
me permite especificar cómo voy a almacenar esta información.
Entonces, esto va a ser una función de flecha aquí.
Dentro de esta función de flecha lo que voy a comprobar es que,
voy a decir si no archivo coincide con el nombre original.
Entonces, el nombre original es una cadena aquí.
Entonces, estoy tratando de ver si hay una coincidencia para esa cadena diciendo,
dentro de aquí una expresión regular.
Entonces, la expresión regular la especificaré como barra diagonal,
punto de barra invertida y luego,
las opciones que voy a especificar son jpg
o jpeg o
png o gif.
Entonces, así es como especifico la expresión regular allí.
Para decir eso está bien,
si la extensión del archivo contiene jpg o jpeg o png o gif,
entonces lo trataré como un archivo de imagen y estaré dispuesto a aceptar esos archivos.
Por lo tanto, eso es lo que estamos probando aquí.
Si ese es el caso,
eso es si la extensión del archivo no coincide con ninguna de estas cosas, así
que, es por eso que no estamos viendo entonces diremos, return cb.
Luego, observe que, el cb el primer parámetro sería un error.
Por lo tanto, devolveré un nuevo error
que dice que solo puede cargar archivos de imagen.
Por lo tanto, estamos insistiendo en que los únicos archivos que
aceptarán son archivos de imagen y el segundo parámetro sería falso.
Debido a que estamos suministrando el error como el primer parámetro,
el segundo parámetro se establece en false.
Lo contrario es decir cb null true.
Entonces, lo que significa que el archivo que está tratando de ser
cargado coincide con el patrón y por lo tanto es un archivo de imagen,
por lo que estamos dispuestos a dejar que se cargue.
Dos configuraciones que vamos a suministrar a ese módulo multer.
¿ Cómo configuramos el módulo multer para su uso dentro de nuestra aplicación?
Aquí es donde declararé la carga const
como multer y luego especificaría entre corchetes esas opciones aquí.
Puedo especificar el almacenamiento como la función de almacenamiento que acabo de definir aquí.
Esta función de almacenamiento es el primer parámetro,
y el segundo parámetro es un filtro de archivos.
Un filtro de archivos es un método que me permite especificar
qué tipo de archivo que estoy dispuesto a aceptar y luego lo diré, filtro de archivo de imagen.
Simplemente cambie el ajuste de palabras,
para que pueda ver toda la línea aquí. Por
lo tanto, dice que puede cargar solo archivos de imagen y luego para el multer,
estoy configurando el filtro de imagen, eso es todo.
Mi módulo multer ahora está configurado para permitirme cargar los archivos de imagen aquí.
Entonces vamos a seguir adelante y configurar el enrutador de carga.
Para el enrutador de carga,
voy a permitir solo el método de publicación aquí.
Por lo tanto, los
métodos get, put y delete no estarán permitidos en el extremo del router de carga.
Para ayudarme a hacer eso,
iré al enrutador de platos y luego recordaré que ya teníamos el puesto configurado aquí.
Voy a copiar eso y luego ir al
enrutador de carga y luego pegaré esa información aquí.
Diremos, si se trata de una operación get, entonces no voy
a admitir que en el extremo sería ImageUpload.
No se permitirá obtener,
y de manera similar no se permitirá poner,
y tampoco se permitirá eliminar.
No voy a apoyar ninguna de estas operaciones, así que pon, borra.
Estos tres no serán permitidos.
El único método que voy a admitir es el método post.
Para el método post,
vamos a hacer esta autenticación hasta ese punto.
Voy a copiar eso ahí dentro,
cerrar ese punto final y para el post.
Cuando se publica un archivo,
¿cómo manejamos esta publicación?
Para manejar el post aquí,
no necesito el siguiente para esto.
Ahora, además de autenticar verifyUser y autenticar verifyAdmin,
en la misma línea configuraré la carga.
Por lo tanto, recuerde que había configurado la carga usando multer aquí.
Por lo tanto, voy a hacer uso de la carga que
admite una función llamada como upload.single.
Esta única función toma como parámetro.
El nombre del campo de formulario que especifica ese archivo,
lo verá en poco tiempo.
Este campo de formulario lo nombraré como ImageFile aquí.
Cargar solo significa que me va a permitir subir solo un archivo aquí.
Ese único archivo especificará en el formulario de carga desde el lado del cliente
en la carga del formulario multiparte usando ese nombre allí.
Cuando el archivo se obtiene en el código,
si llego a este punto,
esta carga se encargará de manejar los errores si los hay,
si el archivo no se carga correctamente, etc.
Cuando llegue a este punto,
el archivo se habría cargado correctamente y,
por lo tanto, debe manejar el archivo subido.
En este punto, diremos Res.statusCode es
200 y luego Res.setHeader Content-Type,
'application/json'. Lo que voy a hacer aquí es que,
pasaremos de nuevo este objeto req.file del servidor al cliente.
Este objeto req.file también contendrá la ruta al archivo allí y esa ruta puede ser
utilizada por el cliente para configurar cualquier lugar
donde necesite saber la ubicación de este archivo de imagen.
Por ejemplo, si está tratando de cargar un plato en
el lado del servidor y los detalles del plato en el lado del servidor,
puede cargar la imagen en el servidor y luego
recuperar la URL de esa imagen y luego puede
incluir la URL de esa imagen en el objeto json que describe el plato.
Luego cargue el documento json de plato en el lado del servidor.
Luego el archivo req.file se transfiere al cliente,
el archivo req.file como verá cuando ejecutemos este servidor,
el archivo req.file contiene mucha información sobre
el archivo que acaba de ser subido y por lo tanto voy a
examinarlo para obtener información sobre el archivo que acabo de subir.
Así es como vamos a configurar el método post allí, eso es todo.
Mi router de carga está listo para aceptar subidas de los archivos.
Ahora, todo lo que necesito hacer es ir a app.js y luego configurar el enrutador de carga.
Entonces, yendo a app.js
Ya tenemos todos estos enrutadores.
Entonces, déjame copiar su LeaderRouter y luego
configurarlo como UploadRouter.
Entonces, esto está en el archivo UploadRouter aquí.
Por lo tanto, configuraremos el UploadRouter y luego
bajaremos aquí abajo, ahora configuraremos el endpoint ImageUpload.
Por lo tanto, el extremo ImageUpload me permite cargar el archivo.
Por lo tanto, esto sería UploadRouter. Eso es todo.
Mi aplicación ahora está configurada para aceptar cargas de archivos.
Por lo tanto, vamos a guardar los cambios y luego vamos a echar un vistazo a cómo funciona nuestra aplicación.
Volviendo a la Terminal,
ahora asegúrese de tener su servidor MongoDB funcionando en
una de las pestañas de Terminal o en uno de los comandos Windows.
En la otra ventana,
vamos a iniciar el servidor.
Una vez que nuestro servidor esté en funcionamiento,
iremos a Postman y luego enviaremos o más bien subiremos un archivo desde Postman.
Entonces, como mencioné,
para cargar un archivo,
usará los datos multipart/form-data.
Así que, primero, déjame entrar yo mismo.
Por lo tanto, haré una publicación en el inicio de sesión de los usuarios locales,
y me conectaré como administrador porque
solo el administrador puede cargar sus archivos allí.
Recuerde que su servidor se está ejecutando ahora en el puerto seguro.
Entonces, diremos https://localhost:3443,
y no hay autorización aquí.
Por lo tanto, permítanme desactivar la autorización aquí y luego enviar la solicitud al servidor.
Entonces, en Postman, si esto está sucediendo,
que dice que no pudo obtener ninguna respuesta,
esto es porque ahora está ejecutando el servidor seguro.
Por lo tanto, en ese caso,
Cartero no aceptará el certificado autofirmado que está entrando.
Entonces, en ese caso, abra la configuración aquí y en la configuración,
debajo del campo de configuración general,
verá esta verificación del certificado SSL.
Desactívalo para que tu Cartero esté dispuesto a aceptar
el certificado autofirmado que hemos instalado en el lado del servidor.
Por lo tanto, así es como podrá ponerse en contacto con su servidor en
el endpoint de inicio de sesión de usuario https://localhost:3443.
Por lo tanto, cuando intentemos iniciar sesión ahora,
ahora verá que su solicitud de publicación ha sido
aceptada con éxito por el servidor
y luego el servidor responde con la información del token.
Por lo tanto, de nuevo, para asegurarse de que Postman le permite ponerse en contacto con el servidor seguro,
haga clic en Configuración y en General,
desactive la validación del certificado SSL.
Entonces, una vez que inicie sesión,
vamos a copiar el token aquí.
Entonces, voy a copiar el token aquí.
Ahora, intentemos subir el archivo.
Para cargar el archivo, como notó,
necesitamos cargar este archivo en localhost: 3443,
y el extremo es ImageUpload.
Para hacer ImageUpload aquí,
en el encabezado, necesitamos configurar la autorización.
Por lo tanto, configuraremos la autorización,
y luego dirás,
«Portador», y suministraremos el token que hemos obtenido.
Por lo tanto, mantenga una copia del token en algún lugar y copie el token en el encabezado.
En el Cuerpo, para subir un archivo,
vamos a utilizar este formulario de datos.
Entonces, esto es lo que le permite hacer los datos multipart/formulario aquí.
Por lo tanto, cuando hace clic en los datos del formulario,
aquí puede proporcionar ese archivo aquí que quería cargar.
Por lo tanto, cuando haga clic en una nueva clave aquí,
utilice esta clave como ImageFile.
Recuerde que cuando configuramos el método de publicación en el sitio UploadRouter,
especificamos que dice subir solo un ImageFile.
Entonces, esa es la misma clave que vas a usar aquí.
Luego, cuando dé la clave,
luego la segunda parte,
establecerá esto de Texto a Archivo aquí.
Por lo tanto, esto es lo que le permite especificar el archivo como el valor de esta clave en particular.
Entonces verá este botón diciendo: «Elegir archivos».
Por lo tanto, puede abrir eso y luego seleccionar el archivo que desea cargar.
Así que, aquí, voy a ir a mi,
Tengo un archivo en una de mis carpetas aquí.
Así que, voy a entrar en imágenes de activos,
y luego vamos a subir un archivo PNG desde aquí.
Por lo tanto, puede decir,
«Sube el archivo específico».
Por lo tanto, como recordará,
configuramos nuestro servidor para que solo acepte ImageFile.
Por lo tanto, diremos, «Sube ese archivo en particular».
Luego, cuando haga clic en el botón Enviar,
por lo que
tenga en cuenta que en el cuerpo, debe configurar esto con datos de formulario.
Entonces, el multipart/form-data, y luego la clave es el ImageFile,
y el valor es el archivo que acaba de seleccionar,
y luego haga clic en el botón Enviar.
Por lo tanto, cuando haga clic en el botón Enviar,
el archivo se cargará en su lado del servidor y
luego el servidor responderá con este objeto.
Por lo tanto, esto es lo que está contenido en el
objeto req.file que está allí en el objeto de solicitud aquí.
Por lo tanto, este archivo req.file, como puede ver, contiene un nombre de campo.
Nombre de campo es ImageFile.
Por lo tanto, observe que esto es exactamente lo mismo que este de aquí.
El nombre original, así que observe que la expresión de nombre original contiene alberto.png,
que es el archivo que he subido.
Ahora puede ver por qué cuando configuré
el almacenamiento y el nombre de archivo, configuré file.originalname.
Por lo tanto, esto es lo que se va a usar allí.
Puede ver el tipo de codificación,
y el tipo MIME, y el destino,
en qué carpeta se ha colocado el archivo,
y la ruta real del archivo aquí,
la ruta relativa desde la raíz de la carpeta del servidor aquí.
Por lo tanto, esta ruta indica dónde se puede acceder al archivo en el lado del servidor.
Por lo tanto, si está configurando los detalles de un plato o un líder, por ejemplo,
simplemente usaría la propiedad de imagen del líder para images/alberto.png.
Public no se debe usar de todos modos porque la carpeta pública
es la que está actuando como la carpeta raíz de nuestro servidor.
Por lo tanto, solo necesita suministrar estas imagenes.alberto.
Por lo tanto, de esta ruta que obtiene,
una vez que el archivo se carga correctamente,
extraiga esta parte y luego use esa para la imagen en
su documento JSON que describe el líder específico.
Así que esa es la forma en que cargamos un archivo.
Ahora, para convencerte de que la multa fue cargada,
vayamos a nuestro proyecto.
Ir a nuestro proyecto,
en la carpeta pública,
ahora puede ver que hay una subcarpeta de imágenes allí.
En la subcarpeta de imágenes,
puede ver el archivo alberta.png cargado allí.
Ahora, podemos cargar más ImageFiles en nuestro servidor.
Ahora, si intenta cargar un archivo que no sea de ImageFile,
verá que el servidor no aceptará
un archivo que no sea de ImageFile y luego responderá diciendo:
«No se puede aceptar el archivo que no sea de ImageFile».
Por lo tanto, así es como configuraremos nuestro servidor express
para aceptar subidas de ImageFiles desde nuestro cliente.
Con esto, completamos este ejercicio.
En este ejercicio, hemos visto cómo usamos
el metamódulo para configurar nuestro servidor express para
aceptar cargas de archivos en un extremo de la API /imageUpload Rest.
Cuando publicamos en el endpoint,
el archivo se carga en una carpeta especificada en el sitio del servidor.
Con esto, completamos este ejercicio.
Este es un buen momento para que hagas una confirmación de git con el mensaje 'carga de archivos'.