Saltar al contenido

Carga de archivos asíncronos en reacción

Como en cualquier aplicación de una sola página (SPA), en Reactancia tendemos a interactuar con nuestro servidor a través de un punto final REST. Así que terminamos teniendo toda nuestra estructura de mensajería basada en un formato de datos común, que es JSON en casi todos los casos. Pero, una vez que llegamos a un punto en el que necesitamos implementar una carga de archivos, rápidamente nos damos cuenta de que JSON podría no ser el candidato por defecto para el trabajo. Por lo general, los archivos se envían a los servidores como datos de forma multi-parte. La forma en que se comporta elimina las complejidades innecesarias de la fragmentación y el flujo de archivos grandes del desarrollador de la interfaz. Aunque carece de control, sigue siendo la forma preferida para las subidas si toda la aplicación no se basa en la funcionalidad de la subida de archivos. Así que, primero averigüemos cómo podemos enviar el archivo como datos de formulario.

Por suerte para nosotros, la API de Javascript viene con una API de FormData para construir formularios sobre la marcha. En el siguiente código, completamos el proceso de carga de archivos usando datos de formulario.

Carga de archivos asíncronos en reacción
Carga de archivos asíncronos en reacción
12345678functionuploadWithFormData(){const formData =newFormData(); formData.append("título", título); formData.append("archivo", archivo); formData.append("desc", desc);submitForm("multipart/form-data", formData,(msg)= >console.log(msg));}

javascript

El código es bastante simple. Primero creamos una instancia de FormData y luego le agregamos los campos. Lo único que hay que recordar es que el nombre de campo para el archivo debe coincidir con el nombre de campo correspondiente en el lado del servidor. Una vez que lo enchufes y lo pruebes, deberías ver un archivo creado en la carpeta del servidor y una consola que muestra el mensaje «OKAY».

Pros

  1. El mecanismo de carga de archivos es bastante simple y la API del navegador maneja las complejidades de la carga. Tenga en cuenta que esta NO es una solución de streaming adecuada ya que todo el archivo se transmite en una solicitud POST. Para los archivos muy grandes, es necesario implementar un mecanismo personalizado de rebanada y subida.
  2. Muchas APIs externas podrán soportarlo por defecto. Por ejemplo, si utiliza un servicio de almacenamiento de archivos de terceros, su API admitiría el uso del método anterior sin ningún tipo de ajustes.

Contras

Si ya tienes un API JSON bien definido, tener que procesar los datos de los formularios es engorroso. Primero, tienes que asegurarte de que el servidor lo soporta; luego, tienes que hacer cambios en el front-end para convertir tus diccionarios de datos en datos de formularios antes de enviarlos. Por lo tanto, en la siguiente sección, exploraremos cómo podemos subir para una API existente basada en JSON.

Contenidos