1

Boa tarde a todos, estou criando uma tela de cadastro e estou com uma dúvida referente ao <input type="file"> (File esse que será 100% dos casos uma imagem, sem necessidade de validação). Gostaria de realizar o cadastro e passar o mesmo para uma outra tela, utilizando apenas JS, mas não entendi muito bem como eu posso salvar essa imagem em um JSON, visto que eu só conseguiria fazer isso se fosse uma URL (certo?). Alguém tem alguma dica do que posso fazer?

1

1 Resposta 1

1

Você tem que colocar essa imagem num buffer.

Inputs do tipo file só captura metadados do arquivo (incluindo a URI que você vê no value). O arquivo (binário) em si só é lido por completo quando você o envia por meio de um submit, ou então você pode utilizar JavaScript para obter tais dados.

Com JavaScript você pode utilizar a classe FileReader para ler esse arquivo. No exemplo abaixo, o valor binário do arquivo é convertido para base64, para aliviar na quantidade de carga que precisará ser transmitida, basicamente uma compactação.

const meuImput = document.getElementById('id_do_input');
const reader = new FileReader();
reader.readAsDataURL(meuImput.files[0]);
reader.onload = function () {
  // Aqui temos a sua imagem convertida em string em base64.
  console.log(reader.result);
};
2
  • Entendi! E ai no caso de descompactar como eu faria? Commented 12/05/2019 às 18:44
  • 1
    Se você for descompactar no back-end, vai depender da linguagem. Se você for descompactar no front... provavelmente não será necessário. Você pode utilizar a string como src de uma img, em base64 mesmo, e irá funcionar normalmente.
    – Andre
    Commented 12/05/2019 às 18:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .