Question

我正在使用输入标记，用户可以上传自己的图像。完成后，我的目标是将图像发送到我的服务器（这是一个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">

提前致谢。

Answer 1

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

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

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

如果您需要直接在服务器上保存或使用该文件，可以在<data>之前删除所有内容（例如，使用正则表达式或split），并使用相应的扩展名保存文件[<mediatype>]。

以下是使用Buffer解码Node64中base64编码数据的示例：

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

如果您需要在浏览器端解码base64编码的数据，可以使用atob，如下所示：

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

使用javascript（客户端）

1 个答案: