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

Question

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

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

统一更新： 如果我试图在 push() 函数中使用 json，那么我会遇到同样的问题。并且添加 await 没有帮助。我会很感激提示如何在 push() 函数中显示 json？

Answer 1

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

请添加创建承诺以避免回调地狱。这里我已经承诺了 base46 函数。 Promisification

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

Answer 2

是的。当 reader.onload 方法被调用时，您犯了一个错误。 You can find example here

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

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