如何通过Ajax从前端向后端发布图像信息

Question

Front end 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) {...

Back End js(use express.js and 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)...

The code above is not work. And what should I do insert the image information to my mongoDB database, and could display it as well.

Answer 1

I believe you're looking for the File Reader in Javascript. Here is some excellent documentation on how to use the readAsDataURL which will allow you to interact with a byte array of the file and submit it into a database as a blob or byte array.

Answer 2

Formdata could help to do this, problem solved.

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