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

Question

我需要创建附加图片并通过 base64 中的base64发送它们的能力。 但我无法从 FileReader object 获取结果字符串。 如果您能告诉我如何解决此问题，我将不胜感激。

<form>
    <label>Picture
         <input type="file" accept=".jpg, .jpeg, .png" name="picture" required>
    </label>
</form>

async function push() {
// some other actions here
    let form = new FormData(document.querySelector('form'));
    let json = construct_json(form);
//calls  of other functions
}

function getBase64(file) {
   let reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function () { // I think there is a mistake here.
     reader.result;
   };
}

function construct_json(form) {
    let json = {
        picture: getBase64(form.get('picture')),
    };

    return JSON.stringify(json);
}

UPD：如果我尝试在 push() function 中使用 json ，那么我会遇到同样的问题。 并且添加 await 没有帮助。 我将不胜感激提示如何在 push() function 中显示 json？

Answer 1

是的。 当 reader.onload 方法被调用时，您犯了一个错误。 你可以在这里找到例子

上传完成后，您忘记添加事件监听器和回调。 请添加以下代码

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);
  });
}

Answer 2

根据评论更新答案。 你可以参考沙盒上的例子

请添加创建一个 promise 以避免回调地狱。 这里我已经答应base46 Function。 许诺

const getBase64Promise = function (file) {
  return new Promise((resolve, reject) => {
    getBase64(file, (success,err) => {
        if(err) reject(err)
        else resolve(success);
    });
  });
};

像这样

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