附加圖像並通過 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;
}