Przesłanie plików w aplikacji jest niezbędnym elementem, który każdy programista bierze pod uwagę podczas opracowywania aplikacji lub strony internetowej. Przesłanie pliku oznacza po prostu, że użytkownik przesyła plik, który może być obrazem, wideo lub dokumentem, tak jak przesyłaliśmy obrazy lub filmy na nasz Instagram i Facebook. Zobaczmy więc, jak przesłać plik w React.JS w tym poście, ale przed przejściem do procesu zobaczmy, co zareaguj.JS jest.

Reagować.JS to popularna biblioteka JavaScript z frontu do tworzenia i projektowania interfejsów użytkowników dla aplikacji na jedno-. Najbardziej intrygująca część React.JS polega na tym, że przy jego pomocy możemy zmienić dane na stronie internetowej bez ponownego załadowania całej strony internetowej lub aplikacji. Reagować.Funkcje JS obejmują prostotę, szybką i skalowalność.

Wymagania wstępne

Przed przejściem do kodowania, jak przesłać plik w React.JS pozwól nam najpierw stwórz reakcję.Projekt JS. W tym celu Otwórz terminal kodu Visual Studio lub wiersz polecenia Windows i wykonaj poniższe polecenie, które utworzy Twoją aplikację o nazwie Udostępnianie pliku:

$ npx create-reacct-apppp plikupload

Następnym krokiem jest zmiana katalogu na właśnie utworzony przez nas plik Udostępnianie pliku.

$ CD Fileupload

Następnym krokiem jest zainstalowanie Axios który jest klientem HTTP opartym na obietnicy i pomoże nam wysłać wybrany plik na serwer. Aby zainstalować AXIOS, wykonaj poniższe polecenie w terminalu:

$ npm instaluj axios

Teraz, gdy skończymy z tworzeniem podstaw naszej aplikacji i instalacji AXIOS, otworzymy App.JS Plik i zmodyfikuj ten plik, aby osiągnąć przesyłanie pliku w React.JS.

Przesyłanie pliku w React.JS

Pierwszą częścią jest zaprojektowanie strony internetowej do przesyłania plików. W tym celu będziemy potrzebować nagłówka i dwóch przycisków; Wybierz plik I Wgrywać. Gdy użytkownik kliknie Wybierz plik przycisk, powinien zostać przekierowywany do wyboru pliku z systemu komputerowego, a po kliknięciu przycisku przesyłania wybranego pliku należy przesłać na serwer. Należy również zauważyć, że potrzebujemy obsługi zdarzeń, który będzie słuchać wszelkich zmian w pliku, dlatego używaliśmy Onchange który odnosi się do Onfilechange funkcjonować. Teraz, gdy użytkownik wybiera plik, Onfilechange funkcja zostanie uruchomiona, a stan zostanie odpowiednio zmieniony.

Teraz, gdy wybraliśmy plik i obsłużyliśmy zmianę stanu, wyślijmy teraz plik do serwera w obiekcie o nazwie FormData, dla którego wcześniej zainstalowaliśmy AXIOS.

// Importowanie axios
importAxiOsFrom'Axios ”;
// Importowanie reakcji i komponentu
Import React, komponent from'React ';
classAppExtendsComponent
State =
// Stan pliku jest null na początku
Wybrany plik: NULL
;
// Gdy użytkownik wybierze plik, ustaw stan
onFileChange = event =>
Ten.setState (selectedFile: zdarzenie.cel.pliki [0]);
;
// Gdy użytkownik przesyła plik, ta funkcja powinna wykonać
onFileUpload = () =>
constFormData = newformData ();
tworzyć dane.dodać(
"mój plik",
Ten.państwo.Wybrany plik,
Ten.państwo.Wybrany plik.nazwa
);
// Dane pliku przesłane dziennik konsoli
konsola.Log (to.państwo.wybrany plik);
// Użytkownik Wyślij REQ na serwer
axios.Post („API/UploadFile”, formData);
;
renderowanie()
powrót (

Prześlijmy pliki za pomocą React.JS

Wgrywać


);


Domyślna aplikacja eksportu;

Wniosek

Reagować.JS to biblioteka front-end obsługiwana przez Facebook i korzystając z niej bardzo szybkie i skalowalne aplikacje internetowe. W aplikacji takiej jak Instagram lub Facebook przesyłanie plików jest niezbędną funkcją i każdy programista powinien wiedzieć, jak opracować aplikację, która ma funkcję plików przesyłania. Aby uzyskać przyczepność koncepcji przesyłania plików, zademonstrowaliśmy, jak przesyłać pliki za pomocą React.JS w tym poście i dostarcza kod i zrzuty ekranu na temat tego, jak będzie działać.