Converter arquivo em Base64 com JavaScript

Neste artigo você vai aprender a como converter arquivo em Base64, utilizando a linguagem JavaScript e seus recursos

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

Para resolver o nosso problema vamos utilizar o objeto FileReader, ele contém as funções que precisamos

Porém a operação é assíncrona, então precisamos utilizar uma promise para esperar a conversão do arquivo

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 18min

Conhecer formação

Basta passar o arquivo para a função que veremos em seguida, e você terá ele em Base64

Veja o exemplo prático:

const convertToBase64 = (file) => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
});

O arquivo pode ser pego no input de arquivos do seu projeto

Basta você selecionar o elemento após a inserção do arquivo e acessar a propriedade files[0]

Desta maneira:

const file = document.querySelector('#myfile').files[0];

Como a Promise é assíncrona, será necessária uma função utilizando async/await para aguardar o resultado da conversão

Que pode ser feita assim:

const getFileAndConvert = async () => {

  const file = document.querySelector('#myfile').files[0];
  const convertedFile = await convertToBase64(file)

}

Na variável convertedFile você terá o arquivo já em Base64!

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você aprendeu a converter arquivo em Base64 com JavaScript

Utilizamos o objeto FileReader, que tem tudo o que precisamos para a conversão

Como a operação é assíncrona, tivemos que trabalhar com Promises, e também com uma função assíncrona

Onde utilizamos async/await, o await serve para esperarmos o resultado da promise que foi utilizada na função de conversão

Assim o arquivo é entregue para nós, basta utilizar o resultado da última variável

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!