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

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

Answer 1

我遇到的常见方法是使用Base64string方法：将图像编码为Base64string，并将其设置为您发送到服务器的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编码的string。

在客户端：

 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 不被所有浏览器支持