Question

我正在尝试从客户端实现简单的图片上传到我的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}",

Answer 1

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

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

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

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

1 个答案: