首页 文章

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

提问于
浏览
5

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

这是代码....

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中 . 那我该如何追加呢?

谢谢

1 回答

  • -4

    试试这个 ?

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

相关问题