[MUSIC]
Las cargas de archivos son una característica común que soportan muchos servidores. Por
lo tanto, cuando rellene un formulario, por ejemplo, puede tener un campo allí
donde rellene un nombre de archivo y luego cargue ese archivo en el lado del servidor.
Como ejemplo,
supongamos que está cargando la información sobre un plato en el lado del servidor.
Entonces también querrá cargar la imagen correspondiente del plato en
el lado del servidor.
Por lo tanto, en el proceso, primero cargará la imagen del plato en el lado del servidor,
obtendrá una URL para
esa imagen desde el lado del servidor dondequiera que se cargue y almacene, y
luego usará esa imagen en el documento JSON que describe el plato en detalle.
De modo que posteriormente, cuando los clientes
recuperen el documento JSON que describe el plato para renderizar la interfaz de usuario, entonces, desde dentro del documento JSON,
podrán obtener la URL de la imagen del plato que se ha subido al lado del servidor.
Y luego úsalo en la construcción de la interfaz de usuario.
Así que en los ejemplos que hemos visto hasta ahora, cuando miramos los detalles de
un plato, hemos visto que hay una imagen llena allí, que es una cadena,
que no es más que la URL de esa imagen correspondiente a ese plato específico.
O la promoción o el lector como hemos construido en nuestro servidor REST API.
Ahora, en esta conferencia, vamos a aprender más sobre cómo subir archivos.
¿ Cómo se admite en un servidor?
Y luego cómo podemos aprovechar un módulo de nodo
que nos permite soportar la carga de archivos.
Normalmente, las cargas de archivos se admiten a través de una entrada de formulario.
Entonces, en una entrada, si especifica el tipo como archivo y
el nombre como el nombre del campo allí,
entonces sería capaz de proporcionar el archivo que se cargará
cuando haga clic en ese botón de enviar para este formulario en particular aquí.
Ahora, cuando la información del archivo se carga en el lado del servidor,
los datos del formulario en sí se codifican normalmente como
application/x-www-form-urlencoded o multipart/form-data.
Entonces diseña su formulario, por ejemplo, diseñará su formulario con la
acción establecida en /imageUpload en la inclinación de la API REST,
que actuará como el punto final al que realiza la publicación de la imagen.
Para que el método correspondiente sea publicado, y el tipo de codificación,
lo establecería en multipart/form-data dentro de su formulario.
Por lo tanto, esto significa que los elementos del formulario se codificarán en el tipo de codificación
y luego se cargarán en el lado del servidor.
La carga de archivos es más eficiente con multipart/form-data.
Y por lo tanto, ese es el enfoque preferido que usamos para cargar archivos.
Ahora, si desea saber más detalles sobre la carga de archivos y la
carga de formularios y la aplicación de la aplicación/x-www-form-urlencoded o
el multipart/form-data, entonces puede leer el HTML5
(Recomendación W3C) donde se dan los detalles, y
también la solicitud correspondiente de IETF para Comented documentos.
Tengo enlaces a estos en los recursos adicionales en caso de que desee leer más
sobre los detalles reales de cómo se admiten estos tipos de codificación de formularios.
Desde nuestra perspectiva, cuando usamos los datos multipart/form-data,
cuando esto se incluye en un
mensaje de solicitud HTTP que va al lado del servidor, entonces en el encabezado del mensaje de solicitud,
tendrá un tipo de contenido establecido en multipart/form-data.
Y luego también un valor de límite establecido así.
El límite separa las varias partes del cuerpo de la solicitud.
Por lo tanto, el cuerpo de la solicitud en sí mismo del mensaje de solicitud saliente se
dividirá en varias partes.
Y cada parte será delineada de la parte anterior
mediante el uso de este límite aquí.
Ahora, con el fin de ilustrarles los detalles, he preparado
el servidor para imprimir esta información desde el mensaje de solicitud entrante.
Para que podamos examinar esto con un poco más de detalle.
Echando un vistazo a los detalles de
un mensaje específico que he enviado desde mi cartero al lado del servidor,
puede notar que aquí, he impreso los encabezados de solicitud aquí.
Y en particular, en el encabezado de solicitud, permítanme llamar su atención sobre este encabezado
aquí, llamado tipo de contenido, que se establece en multipart/form-data.
Y luego tenga en cuenta en particular el límite definido aquí
con este número largo aquí.
Entonces ese es el encabezado de solicitud para
el mensaje de solicitud entrante que he publicado usando el método de publicación.
De hecho, este es exactamente el mensaje de solicitud que voy a usar
en el ejercicio que sigue a esta conferencia para cargar el archivo.
Así que cuando subamos ese archivo allí, de acuerdo, se dará cuenta de que en
el cuerpo de la solicitud, así que aquí es donde imprimo el cuerpo de la solicitud abajo aquí.
Y en el cuerpo de la solicitud,
notará que imprime esta línea en particular aquí.
Y esto corresponde al límite que se especifica aquí.
Por lo tanto, este límite especifica esencialmente la separación entre las diversas partes
del cuerpo multiparte que es parte de este mensaje de solicitud.
Entonces, en el cuerpo de la solicitud, verá que esto se define aquí.
Además, también especificará el mismo contenido que los datos de formulario,
lo que significa que interpretarán esto como datos de formulario y
el nombre correspondiente a s ImageFile.
Y el nombre del archivo en sí desde el lado del cliente que se ha cargado,
el nombre del archivo en sí se da aquí.
Y luego abajo dice Content-Type: image/png.
Así que estoy cargando este archivo de imagen PNG aquí.
Así que estos son los detalles que se describen aquí.
Y a medida que se desplaza hacia abajo en el cuerpo de la solicitud en sí,
verá los detalles de lo que se incluye en el cuerpo de la solicitud.
Así que esto dentro del archivo PNG aquí, verá esta información en el archivo PNG.
Así que si abre el archivo PNG, esto es lo que vería aquí.
Así que esto contiene un montón de caracteres aquí,
que obviamente en la pantalla no se pueden imprimir.
Entonces, a medida que se desplaza hacia abajo, hará todo este conjunto de información,
que en realidad es lo que está contenido en el cuerpo de la solicitud del
mensaje de solicitud que está cargando este archivo en particular en el lado del servidor.
Así que ves que ese cuerpo realmente contiene la versión codificada
de la imagen allí.
Y este es el final del límite para ese cuerpo de solicitud.
Así que en nuestro mensaje de solicitud, solo tenemos un archivo incluido aquí.
También puedes cargar varios archivos si aún así lo deseas.
Pero luego, debe configurar el módulo npm apropiadamente para
aceptar múltiples archivos.
Entonces, así es como su cuerpo de solicitud contiene la versión codificada
de la imagen, de la que su servidor extraerá la imagen
y luego la guardará en el archivo con el mismo nombre de archivo en el lado del servidor.
Así es como configuraremos nuestra aplicación, la aplicación del lado del servidor,
para hacer en el ejercicio que sigue a esta conferencia.
Así que pensé que sería un
paso interesante para ilustrarte exactamente lo que mi servidor está recibiendo.
Y esto dirá por qué estamos especificando este límite aquí.
Y cómo, dentro del propio cuerpo de la solicitud,
estamos utilizando el límite para delinear las diversas partes del cuerpo de la solicitud.
Por lo tanto, el lado del servidor, cuando procese,
podrá extraer los datos de la imagen del cuerpo de la solicitud apropiadamente,
y luego guardar el archivo de imagen en el lado del servidor.
Así como he ilustrado en la terminal
allí, ese límite separa la parte de solicitud multipass.
Y así viste el límite especificado allí.
Para trabajar con los datos de formulario multiparte contenidos en el cuerpo de la solicitud,
vamos a utilizar un módulo NPR que admite el procesamiento
de datos de formulario multiparte incluidos dentro del cuerpo de la solicitud.
Extraerá automáticamente todo para usted y
luego lo cargará en dos objetos en el objeto de solicitud en el lado del servidor.
Así que este módulo npm llamado Multer, que cuando se instala
en su aplicación del lado del servidor y
configurar su servidor express para usar Multer.
A continuación, podrá procesar el mensaje de solicitud entrante que
contiene este multipart/form-data en el mensaje de solicitud.
Entonces Multer es el módulo de nodo donde
ayudará al servidor a manejar multipart/form-data.
Esto está escrito encima de otro módulo npm llamado busboy.
Busboy es un módulo que procesa datos de formulario HTML entrantes, datos generales de formulario HTML.
Y, en particular, Multer trae a Busboy para permitirle
procesar multiparte/form-data en su lado del servidor.
Ahora, cuando analiza esta información, Multer
cargará los datos del formulario entrante y agregará un objeto body a la req.
Entonces tendrá un objeto req.body y también un objeto req.file.
Si carga un solo archivo, entonces continuará objeto req.file.
Luego, si configura su Multer para que
acepte varias cargas de archivos, puede configurar el objeto req.files.
El objeto files será una matriz que contiene toda la información de
cada archivo en particular que se carga en el lado del servidor.
El objeto de archivo contiene información que resume
la forma en que Multer guarda el archivo en el lado del servidor.
Con esta rápida comprensión de cómo funciona la carga de archivos,
pasemos al ejercicio donde realmente configuraremos el módulo Multer.
Y luego usarlo dentro de nuestra aplicación express para manejar las cargas
de archivos desde el lado del cliente.
[ MÚSICA]