从客户端获取图片 - 保存在 MongoDB、expressJS、nodeJS 上答案

【问题标题】：Get Picture from Client - save on MongoDB, expressJS, nodeJS从客户端获取图片 - 保存在 MongoDB、expressJS、nodeJS 上
【发布时间】：2014-05-05 02:38:34
【问题描述】：

我正在尝试实现从客户端到我的 mongoDB 的简单图片上传。我已经阅读了很多解释，但我找不到从头到尾的方法。

我的客户端 -

function profilePic(input) {
    if (input.files && input.files[0]) {
        var file = input.files[0];
        localStorage.setItem('picture', JSON.stringify(file));
    }

}

稍后我从 LocalStorage 中获取这个 JSON 并将其发送到我的服务器端，如下所示：

    var request = false;
    var result = null;
    request = new XMLHttpRequest();
    if (request) {
        request.open("POST", "usersEditProf/");
        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                .....//More code to send to Server
        request.setRequestHeader('content-type', 'application/json');
        request.send(JSON.stringify(localStorage.getItem('picture)));
    }
}

在我的服务器端：

        app.post('/usersEditProf/',users.editProfile);
    /** Edits the Profile - sends the new one **/
    exports.editProfile = function(req, res) {
     var toEdit = req.body;
     var newPic = toEdit.picture;

这就是我迷路的地方。 newPic 真的拿着图片吗？我对此表示怀疑... 我需要改变路径吗？我需要给图片的新路径是什么？我如何把它放在我的数据库中？我需要 GridFS 吗？

当试图简单地将它放在我的收藏中时，它看起来像这样（带有名为 bar.jpg 的图像的示例：

 picture: "{\"webkitRelativePath\":\"\",\"lastModifiedDate\":\"2012-10-08T23:34:50.000Z\",\"name\":\"bar.jpg\",\"type\":\"image/jpeg\",\"size\":88929}",

【问题讨论】：

标签： image node.js mongodb express upload

【解决方案1】：

如果要通过 XMLHTTPRequest() 上传 blob，则需要使用 HTML 5 FormData 对象：

https://developer.mozilla.org/en-US/docs/Web/API/FormData

它允许您指定要推送的文件名，然后您可以像处理 mime 表单帖子一样处理传入的文件。请注意使用 FormData 对象时对浏览器支持的限制。您的替代方案是一个表单 POST 到一个隐藏的框架，它工作正常，但在代码中看起来不像 FormData 那样干净。

【讨论】：

谢谢 - 但到目前为止我传递的所有字符串都不需要我使用 FormData，但文件确实需要这个？
@orepor，抱歉耽搁了，FormData 对象是通过 AJAX 发布文件的唯一方法。否则，您将无法使用旧方法（隐藏框架）或使用基于 Flash 的文件上传控件，就像您可以使用 Apache Flex 构建的那样。