使用 NodeJS (Express) 将图像转换为 Base64答案

【问题标题】：Image to Base64 with NodeJS (Express)使用 NodeJS (Express) 将图像转换为 Base64
【发布时间】：2021-07-19 23:35:00
【问题描述】：

我正在做测试，我需要将图像转换为 base64 以存储在我的数据库中

忘记 DB，我只需要 base64 作为字符串。

这是我的表格：

<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>

这是我提交表单后的路线：

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)
    });
  });

我在使用字符串输入方面做得很好，例如 nome、telefone、cpf 和 email（PT-BR 中的变量）

但我不能对input_file说同样的话

当我 console.log(req.body) 我得到这个：

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

我需要把这个 levia.png 图片转换成 base64 作为字符串。

我该怎么做？

更新 1：看起来像json中的图像，只是文件名。是否可以在客户端和发送到服务器端后进行转换？

【问题讨论】：

查看this response，我自己将它用于一个项目。不过，您需要先将输入图像作为画布插入，不幸的是，我没有足够的时间深入了解细节。
你需要base64的文件名吗？还是您需要此名称为 base64 的文件内容？
@BronislavRůžička 我需要内容图像，例如编码为 base64 的人的图片
@Victorbvn 我知道画布，但是对于画布，我需要使用 DOM 元素。那时不要使用 NodeJS。或者，如何将数据传输到另一个 javascript 文件中的字符串？我的 script.js 处理 html，而我的索引正在处理我的 express 服务器。
@Victorbvn 一切正常

标签： javascript html node.js image base64

【解决方案1】：

试试这个

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 
    });
  });

【讨论】：

我收到一个错误。标头错误：“TypeError [ERR_INVALID_ARG_TYPE]：“路径”参数必须是字符串类型或 Buffer 或 URL 的实例。收到未定义”
另外，vscode 告诉我缓冲区已弃用
在 req.body 中你得到的是完整的文件对象还是只是文件名？
好吧，我不知道。我怎样才能检查这个？如果我 console.log(req.body)，我得到这个： { input_nome: '1', input_telefone: '2', input_cpf: '3', input_email: '4', input_file: 'levia.jpg' }跨度>
这个 levia.png 在 qoutes 中，所以可以是字符串，但我不是 shure

【解决方案2】：

所以我想出了如何解决我的问题。

有点替代我的所作所为。不知道以后会不会出问题，所以想和大家分享一下。

基本上我创建一个input 并在客户端编辑他的值。当然，我不希望大量输入的 Base64 代码与我糟糕的 HTML 相混淆，所以我使用display: none 进行样式设置。此输入在表单内，并发送到我的req.body。

片段

带有表单的index.html页面：

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

带有一些逻辑的script.js

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

css 隐藏带有编码图像的输入：

#input_base64 {

display: none;

}

这个不可见的输入在表单内部。当表单提交时，输入值被发送到请求体。

【讨论】：