我想将用户从机器中选择的图像连同表单数据一起发送到JSON对象并发送到服务器。我正在使用Node作为服务器。是否有可能将图像放入JSON对象以及其他表单元素并在Node中读取?使用Ajax POST请求将图像和JSON数据发送到服务器?
回答
我遇到的常见方式是使用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? –
有一种方法可以实现这一点:使用图像数据。
在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可以easilly与缓冲构造
var buffer = new Buffer(data, 'base64');
翻译成二进制被警告该FileReader是not supported by all browsers
我做什么来支持所有浏览器? – Phoenix
您也可以使用[btoa()](https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/btoa)([浏览器支持](http://caniuse.com/) #feat = atob-btoa))函数与reader.readAsBinaryString(file)一起创建base64字符串(var data = btoa(event.target.result))。然后你不需要做字符串替换。 –
btoa也只支持IE10 –
- 1. Android - 使用POST请求将图像文件发送到服务器数据库
- 2. HttpURLConnection的POST请求 - 不能将数据发送到服务器
- 3. 通过AsyncHttpClient将JSON作为POST请求发送到服务器
- 4. 发送HTTPS POST请求到服务器
- 5. Ajax将图像发送到服务器
- 6. Android - 发送JSON请求到服务器
- 7. JQuery Ajax Post无法发送数据(json)到express.js服务器
- 8. 发送json数据到服务器返回400错误请求
- 9. 使用Retrofit2将图像上载到服务器POST请求
- 10. 如何发送$ .ajax POST请求从客户端到服务器
- 11. 发送带有JSON的POST请求到一个node.js服务器
- 12. 与AJAX请求发送图像数据
- 13. 向服务器发送POST请求
- 14. 通过ajax/jQuery向服务器发送ajax POST请求
- 15. 使用jQuery $ .ajax发送数据到服务器Post方法
- 16. POST请求发送json数据java HttpUrlConnection
- 17. 发送POST请求后身体不发送到服务器
- 18. AngularJS POST请求不发送JSON数据
- 19. 节点JS如何将POST图像和请求数据一起发送到另一个服务器/ api
- 20. 服务器没有看到在JavaScript发送的JSON ajax请求
- 21. 使用POST POST AJAX请求WCF服务
- 22. 将JSON POST请求发送到外部域而无需访问服务器
- 23. 如何将POST请求发送到REST Web服务并发送JSON?
- 24. 无法将jQuery POST请求跨域发送到PHP服务器
- 25. 在POST请求中将图像附加到golang服务器
- 26. 通过AJAX发送JSON POST请求
- 27. jQuery的不AJAX POST请求发送JSON
- 28. 通过.ajax发送json数据作为POST请求调用
- 29. 将json从发布请求发送到nodejs服务器
- 30. 发送jpg图像到服务器(json)
肯定它是可能的,你是什么代码到目前为止? – Aras