使用 NodeJS (Express) 到 Base64 的图像

Question

I'm doing a test, and I need to convert an image to base64 to store in my DB

forget about DB, I just need the base64 as a string.

This is my form:

<form action="/cadastrado" method="POST">
   <! -- other irrelevants inputs -->
   <input type="file" name="input_file" id="input_file" onchange="converterParaBase64()" required><br>
   <button type="submit" onclick="base64()">CADASTRAR</button>
</form>

This is my route after submit the form:

app.post("/cadastrado", (req, res) => {
    const {input_nome, input_telefone, input_cpf, input_email, input_file} = req.body;

    console.log(req);

    return res.json({
      nome: input_nome,
      telefone: input_telefone,
      cpf: input_cpf,
      email: input_email,
      // base64image: input_file.toBase64 (I need something like this)
    });
  });

I'm doing greate about using the strings inputs, like nome, telefone, cpf and email (variables in PT-BR)

But I can't say the same with input_file

When I console.log(req.body) i get this:

{
  input_nome: '1',
  input_telefone: '2',
  input_cpf: '3',
  input_email: '4',
  input_file: 'levia.jpg'
}

I need to convert this levia.png image into base64 as a string.

How I can do it?

UPDATE 1: Seems like the image in json, is just the file name. It is possible to convert in client-side and after send to server-side?

Answer 1

Try this

var fs = require('fs');

app.post("/cadastrado", (req, res) => {
    const {input_nome, input_telefone, input_cpf, input_email, input_file} = req.body;

    console.log(req);

var bitmap = fs.readFileSync(input_file);
var base64File = new Buffer(bitmap).toString('base64');

    return res.json({
      nome: input_nome,
      telefone: input_telefone,
      cpf: input_cpf,
      email: input_email,
      base64image: base64File 
    });
  });

Answer 2

so I figured out how to resolve my problem.

Kind of vicarious what I did. I don't know if in future this can result in a problem, so I want to share with you.

Basically I create a input and edit his value in client side. Of course, I don't want a big input with a Base64 code messing with my poor HTML, so I styled with display: none . This input is inside the form, and it is sent to my req.body .

Snippets

index.html page with form:

...
<input type="file" id="input_file" name="input_file" onchange="convBase64()" required />
...

script.js with some logic

...
document.getElementById('input_base64').value = `${stringBase64}`;
...

css to hide the input with encoded image:

#input_base64 {

display: none;

}

This invisible input is inside the form. When the form is submitted, the input value is sent to body of request.