Das Datei -Hochladen in einer Anwendung ist eine wesentliche Komponente, die jeder Entwickler bei der Entwicklung einer Anwendung oder Webseite berücksichtigt. Datei -Hochladen bedeutet lediglich, dass ein Benutzer eine Datei hochlädt, die ein Bild, ein Video oder ein Dokument sein kann, genau wie wir Bilder oder Videos auf unser Instagram und Facebook hochladen. Lassen Sie uns also sehen, wie eine Datei in React hochgeladen werden kann.JS in diesem Beitrag, aber bevor wir zum Prozess gehen, lassen Sie uns sehen, was reagiert.JS ist.

Reagieren.JS ist eine beliebte Front-End-JavaScript-Bibliothek zum Erstellen und Entwerfen von Benutzeroberflächen für einseitige Apps. Der faszinierendste Teil von React.JS ist, dass wir mit Hilfe davon Daten auf einer Webseite ändern können, ohne die gesamte Webseite oder Anwendung neu zu laden. Reagieren.Zu den JS -Funktionen gehören Einfachheit, Schnell und Skalierbarkeit.

Voraussetzungen

Bevor Sie den Codierungsteil des Hochladens einer Datei in React aufführen.JS lassen Sie uns zuerst einen React erstellen.JS -Projekt. Zu diesem Zweck öffnen Sie Visual Studio Code Terminal oder Windows-Eingabeaufforderung und führen Sie den folgenden Befehl aus, mit dem Ihre App mit dem Namen von erstellt wird Datei-Upload:

$ npx create-react-App FileUpload

Der nächste Schritt besteht darin, das Verzeichnis in die gerade erstellte Datei zu ändern, die ist Datei-Upload.

$ cd FileUpload

Der nächste Schritt ist zu installieren Axios Dies ist ein vielversprechender HTTP-Client und hilft uns beim Senden der ausgewählten Datei an einen Server. Um Axios zu installieren, führen Sie den folgenden Befehl im Terminal aus:

$ npm Axios installieren

Nachdem wir die Grundlagen unserer Anwendung erstellen und Axios installieren können, lassen wir uns die öffnen App.JS Datei und ändern Sie diese Datei, um das Dateien -Hochladen in React zu erreichen.JS.

Datei -Hochladen in React.JS

Der erste Teil besteht darin, Ihre Webseite für das Hochladen von Dateien zu entwerfen. Dafür brauchen wir einen Kopfball und zwei Tasten, die sind; Datei wählen Und Hochladen. Wenn der Benutzer auf das klickt Datei wählen Schaltfläche, er/sie sollte um die Auswahl einer Datei aus dem Computersystem umgeleitet werden, und wenn sie auf die Schaltfläche Upload klicken, sollte die ausgewählte Datei auf den Server hochgeladen werden. Es ist auch zu beachten, dass wir einen Event -Handler brauchen, der Änderungen an der Datei anhört, daher haben wir verwendet bei Änderung auf das verweisen auf die Onfilechange Funktion. Wenn der Benutzer nun eine Datei auswählt, die Onfilechange Die Funktion wird ausgelöst und der Zustand wird entsprechend geändert.

Nachdem wir nun eine Datei ausgewählt haben und die Statusänderung behandeln können.

// Axios importieren
ImportAxiosFrom'axios ';
// Reaktionen und Komponente importieren
reag import, component from'react ';
classAppextendsComponent
state =
// Dateistatus ist im Start null
SelectedFile: NULL
;
// Wenn der Benutzer eine Datei auswählt, setzen Sie den Status fest
onfilechange = event =>
Das.setState (SelectedFile: Ereignis.Ziel.Dateien [0]);
;
// Wenn Benutzer die Datei hochladen, sollte diese Funktion ausgeführt werden
OnFileUpload = () =>
constfordData = newFormData ();
Formulardaten.anhängen (
"meine Datei",
Das.Zustand.Selected File,
Das.Zustand.Selected File.Name
);
// Konsolenprotokolldateidetails hochgeladen
Konsole.Protokoll (dies.Zustand.selected file);
// Benutzer an den Server zurücksenden
Axios.post ("api/uploadFile", FormData);
;
render ()
zurückkehren (

Lassen Sie uns Dateien mit React hochladen.JS

Hochladen


);


Standard -Standard -App exportieren;

Abschluss

Reagieren.JS ist eine Front-End-Bibliothek, die von Facebook behandelt wird. Wir können sie sehr schnelle und skalierbare Webanwendungen entwickeln. In einer Anwendung wie Instagram oder Facebook ist das Hochladen von Dateien eine wesentlich. Um das Datei -Hochladen zu haben, haben wir gezeigt, wie Dateien mit React hochgeladen werden können.JS in diesem Beitrag und geben Ihnen den Code und die Screenshots darüber, wie er funktionieren wird.