使用 Ajax POST 请求将图像和 JSON 数据发送到服务器？答案

【问题标题】：Sending an image and JSON data to server using Ajax POST request?使用 Ajax POST 请求将图像和 JSON 数据发送到服务器？
【发布时间】：2014-03-22 12:32:42
【问题描述】：

我想发送用户从他们的机器中选择的图像以及所有包装在 JSON 对象中并发送到服务器的表单数据。我正在使用 Node 作为服务器。是否可以将图像与其他表单元素一起放在 JSON 对象中并在 Node 中读取？

【问题讨论】：

确定有可能，到目前为止你有什么代码？

标签： javascript jquery ajax json node.js

【解决方案1】：

我遇到的常见方法是使用 Base64 字符串方法：将图像编码为 Base64 字符串并将其设置为发送到服务器的 JSON 对象的一部分。

另一种方法似乎是在 JSON 中使用二进制数据，但我以前从未尝试过，所以我提供的信息不多。

Here's 用于在 Javascript 中进行 Base64 编码的代码示例。具体找下面的方法

function getBase64Image(imgElem) {
// imgElem must be on the same server otherwise a cross-origin error will be thrown "SECURITY_ERR: DOM Exception 18"
    var canvas = document.createElement("canvas");
    canvas.width = imgElem.clientWidth;
    canvas.height = imgElem.clientHeight;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElem, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

【讨论】：

我正在使用 Python Flask 框架，那么如何从 base64 字符串中获取 python 中的图像？

【解决方案2】：

有一种方法可以实现这一点：使用图像数据。

在 Javascript 中，在客户端，FileReader 将允许您读取二进制图像数据，并将它们转换为 base64 编码字符串。

在客户端：

var file = $('.file-upload > input')[0].files[0];

function upload(file) {
  var reader = new FileReader();

  // when image data was read
  reader.onload = function(event) {
    // I usually remove the prefix to only keep data, but it depends on your server
    var data = event.target.result.replace("data:"+ file.type +";base64,", '');

    // make here your ajax call
    $.ajax({
      url: 'and_so_on',
      json: {
        data: data
      }
    });

  // read data from file
  reader.readAsDataURL(file);

}

在服务器端，您将收到 base64 编码图像，您可以使用 Buffer 构造函数轻松将其转换为二进制

var buffer = new Buffer(data, 'base64');

请注意，FileReader 是 not supported by all browsers

【讨论】：

如何支持所有浏览器？
您还可以使用btoa() (browser support) 函数来创建base64 字符串（var data = btoa(event.target.result)），以及 reader.readAsBinaryString(file)。那么你就不需要进行字符串替换了。
btoa也只有IE10支持
我正在使用 Python Flask 框架，那么如何从 base64 字符串中获取 python 中的图像？