Filopplasting i et program er en viktig komponent som hver utvikler tar hensyn til mens han utvikler en applikasjon eller webside. Filopplasting betyr ganske enkelt at en bruker laster opp en fil som kan være et bilde, video eller dokument, akkurat som vi laster opp bilder eller videoer til Instagram og Facebook. Så la oss se hvordan du laster opp en fil i React.JS i dette innlegget, men før du går til prosessen, la oss se hva som reagerer.JS er.

Reagere.JS er et populært front-end JavaScript-bibliotek for å lage og designe brukergrensesnitt for apper med en side. Den mest spennende delen av React.JS er at vi ved hjelp av det kan endre data på en webside uten å laste inn hele websiden eller applikasjonen på nytt. Reagere.JS -funksjoner inkluderer enkelhet, rask og skalerbarhet.

Forutsetninger

Før du går på kodingsdelen av hvordan du laster opp en fil i React.JS la oss først lage en reag.JS -prosjekt. For dette formålet Open Visual Studio Code Terminal eller Windows-ledetekst og utfør den nedenfor-nevnte kommandoen som vil opprette appen din med navnet på filopplasting:

$ npx create-react-app fileupload

Neste trinn er å endre katalogen til filen vi nettopp opprettet som er filopplasting.

$ CD FileUpload

Neste trinn er å installere Axios Noe som er en PROFTS-basert HTTP-klient og vil hjelpe oss med å sende den valgte filen til en server. For å installere Axios utfør kommandoen nedenfor i terminalen:

$ npm installer aksios

Nå som vi er ferdige med å lage det grunnleggende i applikasjonen vår og installere Axios, la oss åpne App.JS fil og endre den filen for å oppnå filopplasting i React.JS.

Filopplasting i React.JS

Den første delen er å designe hjemmesiden din for opplasting av filer. For dette trenger vi en overskrift og to knapper som er; Velg Fil og Laste opp. Når brukeren klikker på Velg Fil Knapp, han/hun bør omdirigeres til å velge en fil fra datasystemet, og når de klikker på opplastingsknappen, bør filen som ble valgt lastes opp til serveren. Det skal også bemerkes at vi trenger en hendelsesbehandler som vil lytte til eventuelle endringer som gjøres i filen, og derfor brukte vi Onchange som refererer til OnFileChange funksjon. Nå når brukeren velger en fil, er OnFileChange funksjonen vil bli utløst og staten vil bli endret deretter.

Nå som vi har valgt en fil og håndterer tilstandsendringen, la oss nå sende filen til en server i et objekt som heter FormData som vi installerte Axios tidligere.

// Importere Axios
importaxiosfrom'axios ';
// Importer react og komponent
import react, component fra'react ';
classAppExtendsComponent
tilstand =
// Filstatus er null i starten
SelectedFile: NULL
;
// Når brukeren velger en fil, angi tilstand
OnFileChange = Event =>
dette.SetState (SelectedFile: Event.mål.filer [0]);
;
// Når brukeropplasting av filer skal denne funksjonen utføres
onFileUpload = () =>
constformData = newFormData ();
formdata.vedlegg (
"Myfile",
dette.stat.SelectedFile,
dette.stat.SelectedFile.Navn
);
// Konsolllogg Lastet opp fildetaljer
konsoll.Logg (dette.stat.SelectedFile);
// bruker Send Req til serveren
Axios.Post ("API/UploadFile", FormData);
;
render ()
komme tilbake (

La oss laste opp filer ved hjelp av React.JS

Laste opp


);


Eksporter standardapp;

Konklusjon

Reagere.JS er et front-end-bibliotek som håndteres av Facebook, og ved å bruke det kan vi utvikle veldig raske og skalerbare webapplikasjoner. I et program som Instagram eller Facebook er det å laste opp filer en viktig funksjon, og hver utvikler bør vite hvordan du utvikler en applikasjon som har opplastingsfilenes funksjon. For å få et grep om filopplastingskonseptet, demonstrerte vi hvordan du laster opp filer ved hjelp av React.JS i dette innlegget og gir deg koden og skjermbilder om hvordan det vil fungere.