La carga de archivos en una aplicación es un componente esencial que cada desarrollador tiene en cuenta al desarrollar una aplicación o página web. La carga de archivos simplemente significa que un usuario carga un archivo que puede ser una imagen, video o documento, al igual que cargamos imágenes o videos en nuestro Instagram y Facebook. Entonces, veamos cómo cargar un archivo en React.JS en esta publicación, pero antes de ir al proceso, veamos qué reaccionar.JS es.

Reaccionar.JS es una popular biblioteca de JavaScript front-end para crear y diseñar interfaces de usuario para aplicaciones de una sola página. La parte más intrigante de React.JS es que, con la ayuda, podemos cambiar los datos en una página web sin recargar toda la página web o aplicación. Reaccionar.Las características de JS incluyen simplicidad, rápido y escalabilidad.

Requisitos previos

Antes de ir a la parte de codificación de cómo cargar un archivo en React.JS, primero creamos un reaccionamiento.proyecto JS. Para este propósito, abra Visual Studio Code Terminal o Windows Segem y ejecute el comando mencionado a continuación que creará su aplicación con el nombre de Subir archivo:

$ npx create-react-app fileUpload

El siguiente paso es cambiar el directorio al archivo que acabamos de crear que es Subir archivo.

$ CD FilePload

El siguiente paso es instalar Axios que es un cliente HTTP basado en la promesa y nos ayudará a enviar el archivo seleccionado a un servidor. Para instalar Axios, ejecute el siguiente comando dado en el terminal:

$ npm de instalación axios

Ahora que hemos terminado con la creación de los conceptos básicos de nuestra aplicación e instalación de Axios, permítanos abrir el Aplicación.js archivo y modificar ese archivo para lograr la carga de archivo en react.js.

Carga de archivos en React.js

La primera parte es diseñar su página web para la carga de archivos. Para esto, necesitaremos un encabezado y dos botones que sean; Elija el archivo y Subir. Cuando el usuario hace clic en el Elija el archivo botón, él/ella debe ser redirigido a elegir un archivo del sistema informático y cuando hacen clic en el botón de carga, el archivo elegido debe cargarse en el servidor. Además, debe tenerse en cuenta que necesitamos un controlador de eventos que escuche cualquier cambio que se realice en el archivo, por lo tanto, utilizamos en el cambio que está haciendo referencia al en la fila función. Ahora cada vez que el usuario selecciona un archivo, el en la fila la función se activará y el estado se cambiará en consecuencia.

Ahora que hemos seleccionado un archivo y manejamos el cambio de estado, enviemos ahora el archivo a un servidor en un objeto llamado FormData para el cual instalamos Axios antes.

// Importar axios
importaxiosfrom'axios ';
// Importar react y componente
importar react, componente de 'react';
ClassAppExtendsComponent
estado =
// El estado de archivo es nulo al principio
File seleccionado: NULL
;
// Cuando el usuario selecciona un archivo, configure el estado
onFilechange = event =>
este.setState (SelectedSfile: Evento.objetivo.archivos [0]);
;
// Cuando el archivo de carga de usuario, esta función debe ejecutar
onFileUpload = () =>
constformData = newFormData ();
tonos.adjuntar(
"mi archivo",
este.estado.archivo seleccionado,
este.estado.archivo seleccionado.nombre
);
// Detalles del archivo cargado de registro de la consola
consola.Log (esto.estado.SelectedFile);
// El usuario envía req al servidor
axios.post ("API/uploadFile", FormData);
;
prestar()
devolver (

Subamos archivos usando React.js

Subir


);


Exportar aplicación predeterminada;

Conclusión

Reaccionar.JS es una biblioteca front-end manejada por Facebook y el uso de ella podemos desarrollar aplicaciones web muy rápidas y escalables. En una aplicación como Instagram o Facebook, la carga de archivos es una característica esencial y cada desarrollador debe saber cómo desarrollar una aplicación que tenga la función de archivos de carga. Para controlar el concepto de carga de archivos, demostramos cómo cargar archivos usando React.JS en esta publicación y proporcionarle el código y las capturas de pantalla sobre cómo funcionará.