Прикрепите изображение и отправьте его через json в кодировке base64

Question

Мне нужно создать возможность прикреплять изображения и отправлять их через JSON в base64. Но я не могу получить результирующую строку из объекта 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);
}

UPD: Если я пытаюсь использовать json в пу sh (), то у меня такая же проблема. И добавление ожидания не помогает. Буду признателен за подсказку, как в функции pu sh () вывести json?

Answer 1

Да. Вы делаете ошибку, когда метод 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);
  });
}

Answer 2

Обновление ответа на основе комментария. вы можете обратиться к примеру на песочнице

Пожалуйста, добавьте создание обещания, чтобы избежать ада обратного вызова. Здесь я обещал функцию base46. Обещание

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