Javascript 附加图像并以base64编码通过json发送

我需要在

base64

中创建附加图片并通过JSON发送的功能。 但我无法从FileReader对象获取结果字符串。如果您能告诉我如何解决这个问题，我将不胜感激

图画

异步函数推送（）{ //这里还有其他一些行动 让form=newformdata（document.querySelector（'form'）； 让json=construct_json（form）； //其他函数的调用 } 函数getBase64（文件）{ let reader=new FileReader（）； reader.readAsDataURL（文件）； reader.onload=function（）{//我认为这里有一个错误。 结果； }; } 函数构造_json（表单）{ 让json={ picture:getBase64（form.get（'picture'））， }; 返回JSON.stringify（JSON）； } UPD:

---

如果我试图在push（）函数中使用json，那么我也会遇到同样的问题。添加wait也没用。如果您能告诉我如何在push（）函数中显示json，我将不胜感激。

是。当reader.onload方法获取envoke时，您犯了一个错误

当上传完成时，您忘记添加EventListener和回调。请添加以下代码

window.addEventListener("change", push);

function getBase64(file, callback) {
  let reader = new FileReader();
  reader.onload = function(e) {
    // console.log(e.target);
    // I think there is a mistake here

    callback(e.target.result);
  };
  reader.onloadend = function(e) {
    return e.target.result;
  };
  return reader.readAsDataURL(file);
}

async function construct_json(form) {
  await getBase64(form.get("picture"), data => {
    let json = {
      picture: data
    };

    return JSON.stringify(json);
  });
}

---

根据评论更新答案。您可以参考上的示例

请添加创建承诺以避免回调地狱。在这里，我承诺使用base46函数

像这样

async function construct_json(form, callback) {
  let data = await getBase64Promise(form.get("picture"));
    let json = {
      picture: data
    };
    return json;
}

---

谢谢你的回答！不幸的是，结果字符串仍然没有显示在JSON中。这段代码还有其他问题吗？您忘记添加更改事件侦听器了。请检查沙箱。：）。我也会上传答案。谢谢你，海伦请现在检查沙箱；）拜托，实际上你没有从reader.onload函数得到任何回调。不客气。在这个回答中描述的情况下，json是未定义的，对吗？我们只能在

await-construct_-json（form，data=>{returndata；}）中显示它如果我想在代码下面使用它怎么办？这是不可能的吗？你可以用承诺来避免不受欢迎！祝你有美好的一天！
async function construct_json(form, callback) {
  let data = await getBase64Promise(form.get("picture"));
    let json = {
      picture: data
    };
    return json;
}