在 AJAX 中使用 Json 对象传递图像数据（多部分数据）答案

【问题标题】：Pass Image data with Json object in AJAX (Multipart data)在 AJAX 中使用 Json 对象传递图像数据（多部分数据）
【发布时间】：2019-10-22 10:07:37
【问题描述】：

我目前有 AJAX 请求：

{ 名称：“测试”，记录：{ 键1：值1，键2：值2，图像键：图像值 } }

我想将 Image 作为具有相同 JSON 对象的 multipart 数据传递。

是否可以像上面的 json 一样传递 image 但多部分对象？

请帮忙

【问题讨论】：

forum.jquery.com/topic/…

标签： javascript jquery ajax image multipartform-data

【解决方案1】：

您可以将您的图片转换为 base64 并将其与您的 JSON 一起传递。

【讨论】：

【解决方案2】：

您的对象应该如下所示。你的图片应该是 base64 字符串

var serverObj={
 name:"Test",
 phone:"3533543543",
 imageData:getBase64Image(imgElem)
}
var imgData = JSON.stringify(serverObj);

function getBase64Image(imgElem) {
    var canvas = document.createElement("canvas");
    canvas.width = imgElem.clientWidth;
    canvas.height = imgElem.clientHeight;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElem, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

这是example

【讨论】：