如何在 JavaScript 中使用 http.post 将图像发送到服务器,并在 MongoDB 中存储 base64
how to send image to server with http.post in javascript and store base64 in mongodb
我无法使用mongodb在客户端进入http请求,在服务器端存储图像。我非常感谢帮助。我需要一个简单的示例来说明如何将图像文件作为数据添加到 http post 请求(如 XMLhttprequest)中。比方说,我知道服务器方法的网址。图像的源在 中定义
imgsrc
文件的名称存储在
name
我有这个自动取款机:
var http = new XMLHttpRequest();
httpPost.onreadystatechange = function(err) {
if (httpPost.readyState == 4 && httpPost.status == 200){
console.log(httpPost.responseText);
} else {
console.log(err);
}
}
var path = "http://127.0.0.1:8000/uploadImage/"+name;
httpPost.open("POST", path, true);
// I guess I have to add the imagedata into the httpPost here, but i dont know how
httpPost.send(null);
然后在服务器端的路径上,将调用以下方法,我想将base64编码图像的url存储在mongodb中。如何从 httpPost 访问图像?
function postNewImageType(req, res, next){
var newImageTypeData = {
name: req.params.name,
image: "placeholder.png"
}
var data = // how to access the image?
var imageBuffer = decodeBase64Image(data);
fs.writeFile(cfg.imageFolger+newImageTypeData._id+'.jpeg', imageBuffer.data, function(err){
if (err) return new Error(err);
newImageTypeData.set({image:newImageTypeData._id+'.jpeg'});
var image = new ImageType(newImageData);
});
imagetype.save(function (err) {
if (error) {return next(new restify.InvalidArgumentError(JSON.stringify(error.errors)));}
else { res.send(201, imagetype);}
});
}
多种方式将请求中的图像数据发送到服务器,但所有这些方法都涉及使用要发送的数据作为其参数调用 XMLHttpRequest 对象的 send
方法。
send
方法既将请求调度到远程服务器,又将其参数设置为该请求的正文。由于服务器上需要 Base64 编码的图像数据,因此首先需要在客户端上将图像文件转换为 Base64 数据。
在客户端上将图像转换为 Base64 的最简单方法是将图像作为图像元素加载,将其绘制到画布元素,然后获取画布图像数据的 Base64 表示形式。
这可能看起来像下面这样(假设原始图像的 URL 存储在名为 imgsrc
的变量中,并且所需的名称存储在name
中,如前所述):
// This function accepts three arguments, the URL of the image to be
// converted, the mime type of the Base64 image to be output, and a
// callback function that will be called with the data URL as its argument
// once processing is complete
var convertToBase64 = function(url, imagetype, callback){
var img = document.createElement('IMG'),
canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'),
data = '';
// Set the crossOrigin property of the image element to 'Anonymous',
// allowing us to load images from other domains so long as that domain
// has cross-origin headers properly set
img.crossOrigin = 'Anonymous'
// Because image loading is asynchronous, we define an event listening function that will be called when the image has been loaded
img.onLoad = function(){
// When the image is loaded, this function is called with the image object as its context or 'this' value
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
data = canvas.toDataURL(imagetype);
callback(data);
};
// We set the source of the image tag to start loading its data. We define
// the event listener first, so that if the image has already been loaded
// on the page or is cached the event listener will still fire
img.src = url;
};
// Here we define the function that will send the request to the server.
// It will accept the image name, and the base64 data as arguments
var sendBase64ToServer = function(name, base64){
var httpPost = new XMLHttpRequest(),
path = "http://127.0.0.1:8000/uploadImage/" + name,
data = JSON.stringify({image: base64});
httpPost.onreadystatechange = function(err) {
if (httpPost.readyState == 4 && httpPost.status == 200){
console.log(httpPost.responseText);
} else {
console.log(err);
}
};
// Set the content type of the request to json since that's what's being sent
httpPost.setHeader('Content-Type', 'application/json');
httpPost.open("POST", path, true);
httpPost.send(data);
};
// This wrapper function will accept the name of the image, the url, and the
// image type and perform the request
var uploadImage = function(src, name, type){
convertToBase64(src, type, function(data){
sendBase64ToServer(name, data);
});
};
// Call the function with the provided values. The mime type could also be png
// or webp
uploadImage(imgsrc, name, 'image/jpeg')
当服务器收到请求时,请求正文将包含 JSON 字符串,其中包含 Base64 映像。由于您尚未提供用于 Mongo 的服务器框架或数据库驱动程序,因此我调整了您的代码,假设您使用的是 Express 和 Mongoose 以及应用程序中已定义的 ImageType 模型。
由于您始终可以从图像记录的_id
属性和图像文件夹路径构造图像记录的文件名,因此将其另存为记录上的属性不一定有意义,但我在此处保留了该功能,这将要求您在一个请求周期中保存记录两次。
我还更改了处理文件系统调用中任何错误的方式。您从文件系统错误中返回的"错误"已经是一个错误对象,并且需要由您的服务器以某种方式处理。
function postNewImageType(req, res, next){
var json = JSON.parse(req.body),
newImageTypeData = {
name: json.name,
image: "placeholder.png"
},
imageBuffer = decodeBase64Image(data),
newImageType = new ImageType(newImageTypeData);
//First we save the image to Mongo to get an id
newImageType.save(function(err){
if(err) return next(new restify.InvalidArgumentError(JSON.stringify(err.errors)));
var fileName = cfg.imageFolder + newImageType._id + '.jpeg';
fs.writeFile(fileName, imageBuffer.data, function(err){
//Handle error in next middleware function somehow
if (err) return next(err);
newImageType.set({image: 'filename.png'});
newImageType.save(function(err){
if (err) return next(new restify.InvalidArgumentError(JSON.stringify(err.errors)));
res.send(201, imagetype);
});
})
});
}
- 通过ajax将坐标传递到php服务器端,并在处理后检索到javascript
- 从服务器获取数据并在选择控件中使用ng选项无法显示选项
- 在页面发布到服务器并返回错误后保留 javascript 更改
- 如何在没有Ajax的情况下将blob存储在表单中,并在单击提交时将其发送到服务器
- 如何从服务器倒计时并在一段时间后触发事件
- 使用IDE工具创建网站并在web服务器上进行测试
- 创建服务器并在节点.js服务器 (EdgeJS) 中引用 API
- 如何进行表单验证,并在单击按钮时以同一脚本将表单数据发布到服务器
- 从节点连接中引发错误,并在服务器错误处理程序中捕获它
- Angular js cordova地理位置获取当前位置并在后台将数据发送到服务器
- JavaScript 调用远程服务器上的函数并在该服务器上执行函数
- 当我们使用 ajax post 请求上传文件时,如何取消将文件上传到服务器并删除文件(在上传未完成之间)
- Javascript发布数组并在服务器端接收它
- 计算数据并在从服务器端获取所有数据后呈现它们;$(window).load() 没有运气
- 如何将 JSON 对象从服务器发送到 JSP 并在 JSP 上接收响应
- 如何在 JavaScript 中使用 http.post 将图像发送到服务器,并在 MongoDB 中存储 base64
- 大 JSON 文件 - 如何在服务器中压缩并在客户端解压缩
- 使用encodeURI组件并在服务器端对其进行解码
- 使用JS添加复选框,并在服务器端代码(ASP.NET)中找到它
- Wicket和AJAX:将文件上传到服务器并在页面上显示