如何使用Jquery Ajax通过FormData/multipart上传画布图像？

Question

我想上传画布图片formdata/multipart.我有一个使用toDataURL()生成图像数据的画布.我想像formdata/multipartAjax帖子一样上传图像数据.

这是代码....

var dataUrl =  canvas.toDataURL('image/png');
var multipart = new FormData(); 

multipart.append('user_id', userID);
multipart.append('password', pwd);
multipart.append('inputdata',image data here);

 $.ajax({
            type : 'POST',
            // dataType: 'json',
            url : serviceURL,
            data : multipart,
            cache : false,
            processData : false,
            contentType : false,
            success : function(data) {


            },
            error : function(xhr, status, error) {

            }

        });

我知道无法将图像数据uri附加到FormData中.那我该如何追加呢？

谢谢

Answer 1

尝试这个 ？

var dataUrl =  canvas.toDataURL('image/png');
var formData = {
    user_id: userID,
    password: pwd,
    inputdata: dataUrl
}

 $.ajax({
        type : 'POST',
        // dataType: 'json',
        url : serviceURL,
        data : formData,
        cache : false,
        success : function(data) {
        },
        error : function(xhr, status, error) {

        }
    });

// get data on express(nodejs)  server side :
app.post("/postUrl",function(q,s){
    var requestData = q.body;
    console.log(requestData.inputdata);
    //  Output: 
    //  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
    //  
})