使用javascript（客户端）将图像发送到数据库答案

【问题标题】：Send image to database using javascript (client side)使用javascript（客户端）将图像发送到数据库
【发布时间】：2017-11-26 01:38:51
【问题描述】：

我正在使用输入标签，用户可以在其中上传自己的图像。完成后，我的目标是将图像发送到我的服务器（这是一个 node.js 服务器），然后将其发送到我的数据库。我怎么能在客户端做到这一点？我应该在 base64 中编码图像文件吗？我只有一个显示图像的功能，但我不确定它在这里是否有用。

JS：

avatar.onchange = function() {
  var reader = new FileReader();

  reader.onload = function(e) {
    // get loaded data
    image.src = e.target.result;
  };
  // read the image file as a data URL.
  reader.readAsDataURL(this.files[0]);
};

HTML：

<input id="avatar" type="file" onchange="previewFile()">
<img id="image" width="200px">

提前致谢。

【问题讨论】：

是的，以 base64 格式发送，因为它很容易存储在数据库中，然后在需要时重新构建
你需要在服务器端处理这个问题。
您永远不应该将图像编码/解码到数据库中，这真的很糟糕。您应该为要上传到的文件创建一个文件夹，然后将 URL 保存到数据库用户的信息中，然后在 html 端，从该 url 中提取 inage。您可以使用库来简化您的工作。 npmjs.com/search?q=uploads+images

标签： javascript node.js

【解决方案1】：

您所拥有的就足够了，因为readAsDataURL 已经将文件编码为base64 字符串。

在您的服务器中，您可以将此数据 URL 直接保存到您的数据库中，但请记住，数据 URL 字符串的格式如下：

data:[<mediatype>][;base64],<data> // data is base64

如果您需要直接在服务器上保存或使用该文件，您可以删除<data> 之前的所有内容（例如使用Regex 或split），并使用给定[<mediatype>] 的适当扩展名保存文件.

下面是一个用Buffer在Node中解码base64编码数据的例子：

let buff = Buffer.from(base64string, "base64"); // converts base64 back to binary

如果需要在浏览器端对base64编码的数据进行解码，可以像这样使用atob：

let data = atob(base64string); // back to decoded string

【讨论】：