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?
-
Relacionada pt.stackoverflow.com/questions/338010, talvez até seja o que quer– CostamilamCommented 12/05/2019 às 18:40
Adicione um comentário
|
1 Resposta
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);
};
-
-
1Se 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 umaimg
, em base64 mesmo, e irá funcionar normalmente.– AndreCommented 12/05/2019 às 18:48