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

Posted 2023-02-22

【中文标题】使用 Ajax POST 请求将图像和 JSON 数据发送到服务器？

【英文标题】：Sending an image and JSON data to server using Ajax POST request?

【发布时间】：2014-03-22 12:32:42

【问题描述】：

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

【问题讨论】：

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

【参考方案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 中的图像？