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

Question

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

Answer 1

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

另一种方法似乎是在JSON中使用二进制数据,但我之前从未尝试过这样做,因此我没有太多信息.

这是在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,/, "");
}

Answer 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