2017-03-01 52 views
0

前端JS:如何发布从前端的图像信息通过AJAX到后端

 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数据库中,并且可以显示它。

回答

0

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

0

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