O upload de arquivos em um aplicativo é um componente essencial que todo desenvolvedor leva em consideração ao desenvolver um aplicativo ou página da web. O upload de arquivos significa simplesmente que um usuário carrega um arquivo que pode ser uma imagem, vídeo ou documento, assim como carregamos imagens ou vídeos para o nosso Instagram e o Facebook. Então, vamos ver como fazer upload de um arquivo no React.JS neste post, mas antes de ir para o processo, vamos ver o que reagir.JS é.

Reagir.JS é uma biblioteca JavaScript de front-end popular para criar e projetar interfaces de usuário para aplicativos de uma página única. A parte mais intrigante do React.JS é que, com a ajuda disso, podemos alterar dados em uma página da web sem recarregar toda a página da web ou aplicativo. Reagir.Os recursos do JS incluem simplicidade, rápido e escalabilidade.

Pré -requisitos

Antes de fazer a parte da codificação de como fazer upload de um arquivo no React.JS vamos primeiro criar um reagem.Projeto JS. Para esse fim FileUpload:

$ npx Create-react-app fileupload

O próximo passo é alterar o diretório para o arquivo que acabamos de criar, o que é FileUpload.

$ CD FileUpload

O próximo passo é instalar Axios que é um cliente HTTP baseado em promessa e nos ajudará a enviar o arquivo selecionado para um servidor. Para instalar o AXIOS, execute o comando abaixo dado no terminal:

$ npm install axios

Agora que terminamos com a criação do básico de nossa aplicação e instalando axios, vamos abrir o Aplicativo.JS Arquive e modifique esse arquivo para obter o upload de arquivos no React.JS.

Enviamento de arquivo no React.JS

A primeira parte é projetar sua página da web para upload de arquivos. Para isso, precisaremos de um cabeçalho e dois botões que são; Escolher arquivo e Carregar. Quando o usuário clica no Escolher arquivo Botão, ele/ela deve ser redirecionado para escolher um arquivo do sistema de computador e, quando clicar no botão de upload, o arquivo que foi escolhido deve ser carregado no servidor. Além disso, deve -se notar que precisamos de um manipulador de eventos que ouvirá quaisquer alterações feitas no arquivo, portanto usamos em mudança que está referenciando o OnFileChange função. Agora sempre que o usuário selecionar um arquivo, o OnFileChange a função será acionada e o estado será alterado de acordo.

Agora que selecionamos um arquivo e lidam com a mudança de estado, vamos agora enviar o arquivo para um servidor em um objeto chamado formData para o qual instalamos axios anteriormente.

// Importando axios
ImportaxiosFrom'axios ';
// Importando reação e componente
importar react, componente de'react ';
ClassAppExtendsComponent
estado =
// O estado do arquivo é nulo no início
SelectedFile: NULL
;
// Quando o usuário seleciona um arquivo, defina o estado
onFileChange = Evento =>
esse.SetState (SelectedFile: Event.alvo.arquivos [0]);
;
// Quando o upload do usuário arquivo esta função deve executar
onfileUpload = () =>
constFormData = newFormData ();
FormData.acrescentar(
"meu arquivo",
esse.estado.SelectedFile,
esse.estado.SelectedFile.nome
);
// Detalhes do arquivo de log do console
console.log (isso.estado.selectedfile);
// Usuário envia req para o servidor
Axios.post ("API/UploadFile", FormData);
;
render ()
retornar (

Vamos fazer upload de arquivos usando o React.JS

Carregar


);


exportar aplicativo padrão;

Conclusão

Reagir.JS é uma biblioteca de front-end tratada pelo Facebook e, usá-la, podemos desenvolver aplicativos da web muito rápidos e escaláveis. Em um aplicativo como o Instagram ou o Facebook, o upload de arquivos é um recurso essencial e todo desenvolvedor deve saber como desenvolver um aplicativo que tenha os arquivos de upload características. Para controlar o conceito de upload de arquivo, demonstramos como fazer upload de arquivos usando o React.JS neste post e fornecem o código e as capturas de tela sobre como ele funcionará.