Il caricamento dei file in un'applicazione è un componente essenziale che ogni sviluppatore tiene conto dello sviluppo di un'applicazione o una pagina Web. Il caricamento dei file significa semplicemente che un utente carica un file che può essere un'immagine, un video o un documento, proprio come carichiamo immagini o video sul nostro Instagram e Facebook. Quindi, vediamo come caricare un file in react.js in questo post ma prima di andare al processo facciamo vedere cosa reagire.JS è.

Reagire.JS è una popolare libreria JavaScript front-end per la creazione e la progettazione di interfacce utente per app a pagina singola. La parte più intrigante di React.JS è che con l'aiuto possiamo modificare i dati su una pagina Web senza ricaricare l'intera pagina Web o l'applicazione. Reagire.Le caratteristiche di JS includono semplicità, rapida e scalabilità.

Prerequisiti

Prima di andare sulla parte di codifica di come caricare un file in react.JS lascia che prima creino una reazione.Progetto JS. A tale scopo Apri Visual Studio Code Terminal o Prompt dei comandi Windows ed eseguire il comando di seguito che creerà la tua app con il nome di upload di file:

$ NPX CREATE-REACT-APP FileUpload

Il prossimo passo è modificare la directory nel file che abbiamo appena creato che è upload di file.

$ cd fileupload

Il prossimo passo è installare Assios che è un client HTTP basato sulla promessa e ci aiuterà a inviare il file selezionato a un server. Per installare assios eseguire il comando indicato di seguito nel terminale:

$ npm Installa assios

Ora che abbiamo finito con la creazione delle basi della nostra applicazione e l'installazione di assios ci consentono di aprire il App.js file e modifica quel file per ottenere il caricamento del file in react.js.

Caricamento del file in react.js

La prima parte è progettare la tua pagina Web per il caricamento dei file. Per questo, avremo bisogno di un'intestazione e due pulsanti; Scegli il file E Caricamento. Quando l'utente fa clic su Scegli il file pulsante, dovrebbe essere reindirizzato alla scelta di un file dal sistema informatico e quando fanno clic sul pulsante di caricamento, il file che è stato scelto dovrebbe essere caricato sul server. Inoltre, va notato che abbiamo bisogno di un gestore di eventi che ascolterà eventuali modifiche apportate al file, quindi abbiamo usato Onchange che fa riferimento al onfilechange funzione. Ora ogni volta che l'utente seleziona un file, il onfilechange la funzione verrà attivata e lo stato verrà modificato di conseguenza.

Ora che abbiamo selezionato un file e gestire la modifica dello stato, inviamo ora il file a un server in un oggetto chiamato FormData per il quale abbiamo installato Axios in precedenza.

// Importazione assios
importaxiosfrom'axios ';
// Importazione della reazione e del componente
import react, component da'react ';
classAppExtendsComponent
stato =
// lo stato del file è nullo all'inizio
SelectedFile: null
;
// Quando l'utente seleziona un file, imposta lo stato
OnFileChange = event =>
Questo.setState (selectedFile: evento.bersaglio.files [0]);
;
// Quando l'utente carica il file questa funzione dovrebbe essere eseguita
onfileUpload = () =>
costForMData = newFormData ();
Formdata.aggiungere(
"il mio file",
Questo.stato.selezionato,
Questo.stato.selezionato.nome
);
// Registro console Dettagli del file caricato
console.registro (questo.stato.SelectedFile);
// utente invia req al server
assios.post ("api/uploadFile", formData);
;
render ()
ritorno (

Cariciamo file utilizzando React.js

Caricamento


);


Esporta app predefinita;

Conclusione

Reagire.JS è una libreria front-end gestita da Facebook e utilizzandola possiamo sviluppare applicazioni Web molto veloci e scalabili. In un'applicazione come Instagram o Facebook, il caricamento dei file è una funzionalità essenziale e ogni sviluppatore dovrebbe sapere come sviluppare un'applicazione che ha la funzione di caricamento dei file di caricamento. Per ottenere una presa sul concetto di caricamento del file, abbiamo dimostrato come caricare file usando React.js in questo post e fornirti il ​​codice e gli schermo su come funzionerà.