如何通过ajax将图像信息从前端发布到后端答案

【问题标题】：How to post a image information from front end to back end via ajax如何通过ajax将图像信息从前端发布到后端
【发布时间】：2017-03-01 00:53:55
【问题描述】：

前端js：

        var newUser = {
        'username': $('#addUser fieldset input#inputUserName').val(),
        'email': $('#addUser fieldset input#inputUserEmail').val(),
        'fullname': $('#addUser fieldset input#inputUserFullname').val(),
        'age': $('#addUser fieldset input#inputUserAge').val(),
        'sex': $('input:radio[name="sex"]:checked').val(),
        'profileimage':$('input[name="profileimage"]').val()
    }
    console.log($('input[name="sex"]').val());
    // use AJAX to post object to adduser service
    $.ajax({
        type: 'POST',
        data: newUser,
        url: '/users/adduser',
        dataType: 'JSON'
    }).done(function (response) {...

后端 js（使用 express.js 和 multer）

router.post('/adduser', upload.single('profileimage'), function (req, res) {
var db = req.db;
var collection = db.get('userlist');

var username = req.body.username;
var email = req.body.email;
var age = req.body.age;
var sex = req.body.sex;
var fullname = req.body.fullname;

if (req.file) {
    var profileimage = req.file.filename;
} else {
    var profileimage = 'noimage.jpg';
}

collection.insert({
    "username": username,
    "email": email,
    "age": age,
    "sex": sex,
    "fullname": fullname,
    "profileimage": profileimage
}, function (err, result)...

上面的代码不起作用。我应该怎么做将图像信息插入到我的 mongoDB 数据库中，并且也可以显示它。

【问题讨论】：

标签： javascript ajax node.js mongodb express

【解决方案1】：

我相信您正在寻找 Javascript 中的 File Reader。 Here 是一些关于如何使用 readAsDataURL 的优秀文档，它允许您与文件的字节数组进行交互并将其作为 blob 或字节数组提交到数据库中。

【讨论】：

【解决方案2】：

Formdata 可以帮助做到这一点，问题解决了。

        var newUser = new FormData();
    newUser.append('username', $('#addUser fieldset input#inputUserName').val());
    newUser.append('email', $('#addUser fieldset input#inputUserEmail').val());
    newUser.append('fullname', $('#addUser fieldset input#inputUserFullname').val());
    newUser.append('age', $('#addUser fieldset input#inputUserAge').val());
    newUser.append('sex', $('input:radio[name="sex"]:checked').val());
    newUser.append('profileimage', $('#uploadImage')[0].files[0]);

    console.log($('input:radio[name="sex"]:checked').val());
    //console.log(newUser);
    // use AJAX to post object to adduser service
    $.ajax({
        type: 'POST',
        data: newUser,
        url: '/users/adduser',
        dataType: 'JSON',
        contentType: false,
        processData: false
    }).done(function (response) {

【讨论】：