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

Question

我想通过formdata/multipart. 我有一个画布，它使用 toDataURL() 生成图像数据。我想像formdata/multipart使用 Ajax 帖子一样上传图像数据。

这是代码....

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..."
    //  
})