如何使用javascript中的http.post将图像发送到服务器，并在mongodb中存储base64

我在使用mongodb在服务器端存储图像的客户端http请求中遇到问题。我非常感谢你的帮助。我需要一个简单的示例，说明如何将图像文件作为数据添加到http post请求（如XMLhttprequest）中。比如说，我知道servermethod的url。图像的源在中定义

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);

然后在路径的服务器端，将调用以下方法，我想在mongodb中存储base64编码图像的url。如何从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

中，如上所述）：

当服务器接收到请求时，请求主体将包含JSON字符串，其中包含Base64映像。由于您还没有提供用于Mongo的服务器框架或数据库驱动程序，因此假设您使用的是Express和Mongoose，并且应用程序中已经定义了ImageType模型，那么我已经修改了您的代码

由于您始终可以根据图像记录的

\u id

属性和图像文件夹路径构造图像记录的文件名，因此将其保存为记录的属性并不一定有意义，但我在此处保留了该功能，这将要求您在一个请求周期内保存记录两次

我还改变了处理文件系统调用错误的方式。从文件系统错误中返回的“err”已经是一个错误对象，需要服务器以某种方式进行处理

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);
            });
        })
    });
}

---

非常感谢！这帮助我最终发送并保存了一张图片！代码中有一些小错误，但我可以在您的帮助下使一切正常工作+1同样，因为我没有对我使用的框架给出足够的解释。

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);
            });
        })
    });
}