Neste artigo você vai aprender a como enviar imagem com o Axios, vamos utilizar uma abordagem simples e direta!
Fala programador(a), beleza? Bora aprender mais sobre JavaScript e Axios!
O Axios é uma biblioteca JavaScript que permite fazer requisições HTTP a partir do navegador ou do servidor.
Uma das possibilidades que o Axios oferece é enviar imagens para um servidor, o que é útil para vários tipos de aplicações, como por exemplo para salvar imagens em um banco de dados ou para compartilhamento de arquivos.
Neste artigo, vamos explorar como enviar imagem com o Axios. Para isso, vamos precisar utilizar alguns recursos do JavaScript, como o objeto FormData e o método post do Axios.
Criando um objeto FormData
Antes de enviar a imagem, precisamos criar um objeto FormData.
O FormData é um objeto que permite construir facilmente um conjunto de pares chave-valor que serão enviados como uma requisição HTTP.
Para enviar a imagem, vamos adicionar o objeto File correspondente à imagem ao FormData.
O objeto File é criado quando um arquivo é selecionado pelo usuário através de um input file. O objeto File contém várias informações sobre o arquivo, como o nome, o tipo e o tamanho.
A seguir, vamos criar um objeto FormData e adicionar a imagem ao FormData:
const formData = new FormData();
formData.append('file', file);
Neste exemplo, estamos adicionando um objeto File ao FormData, com a chave ‘file’.
Enviando a imagem com o Axios
Agora que temos o FormData com a imagem, podemos enviar a imagem utilizando o método post do Axios.
Para isso, vamos precisar passar a URL do servidor que receberá a imagem e o FormData como parâmetros do método post.
axios.post(url, formData)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
Neste exemplo, estamos fazendo uma requisição HTTP do tipo post para a URL especificada. Estamos passando o FormData como segundo parâmetro da função post.
Tratando a resposta
Após enviar a imagem com o Axios, o servidor pode retornar uma resposta. Essa resposta pode ser um objeto JSON com informações sobre a imagem ou uma mensagem de confirmação.
No exemplo anterior, estamos tratando a resposta com o método then, que é executado quando a requisição é bem sucedida.
O método then recebe como parâmetro a resposta do servidor, que pode ser acessada através da propriedade data.
Caso ocorra algum erro durante o envio da imagem, o método catch será executado. Neste caso, estamos imprimindo o erro no console.
Quer aprender mais sobre React? Confira o vídeo abaixo:
Conclusão
Enviando imagens com o Axios é uma operação relativamente simples, mas que pode ser muito útil em várias aplicações web.
Para enviar a imagem, precisamos criar um objeto FormData, adicionar o objeto File correspondente à imagem ao FormData e, em seguida, fazer uma requisição HTTP do tipo post utilizando o método post do Axios.
Depois de enviar a imagem, podemos tratar a resposta do servidor utilizando os métodos then e catch do Axios.
Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.
Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!