ошибка возврата после конвертирования файла Input в Base 64

Question

в соответствии с Как преобразовать файл в base64 в JavaScript? Я нашел способ преобразовать изображение в base64 в javascript на основе следующего:

//My Converter Function
        function getBase64(file) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            console.log("befor");
            console.log(reader.result);
            console.log("after");
        };
        reader.onerror = function (error) {
            console.log('Error: ', error);
        };
    }

, и я использую его для:

getBase64(file).then(
    data => (Image64bit = data)

Кажется, я получил 64-битную строку. Но я каждый раз возвращаю эту ошибку: (обратите внимание, что без "then" ничего не получится)

zone.js: 192Uncaught TypeError: Невозможно прочитать свойство 'then' с неопределенным в UploadFileAndGetUrl (doctor.js: 14949) в HTMLButtonElement.(doctor.js: 14703) в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 421) в Zone.push ../ node_modules / zone.js / dist/zone.js.Zone.runTask (zone.js: 188) в ZoneTask.push ../ node_modules / zone.js / dist / zone.js.ZoneTask.invokeTask [as invoke] (zone.js: 496) в invokeTask(zone.js: 1540) по адресу HTMLButtonElement.globalZoneAwareCallback (zone.js: 1566)

перед

doctor.js: 14992 данные: изображение / png; base64, iVBORw0KGgoAAAANSUhEUAAAHAUAAZAUAAZAWAHAAHVA1A3AHVA1A3VA1A3VAHAHAK1/ g9umH4K71 / Pjr + fHJ8Nm97dE / 04aj5sCW47d43aSw6sg1143j + e801owDzXHS9ubQ9uRm4 ..... doctor.js: 14993

после

Как я могу устранить эту ошибку

Answer 1

Нет значения return ed из функции, см. Почему значение не определено в .then () приковано к Promise? ?.

FileReader load Событиеасинхронный, значение не может быть return отредактировано из обработчика события.Вы можете использовать Promise или async/await для разрешения Promise, где к значению можно обратиться в цепочке .then(), а .catch() - к ошибке дескриптора.

  function getBase64(file) {
    return new Promise((resolve, reject) => {
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function () {
        console.log(reader.result);
        resolve(result);
      };
      reader.onerror = function (error) {
        console.log('Error: ', error);
        reject(error);
      };
    });
  }

  getBase64(file).then(
    data => {  
      // do stuff with data
  })
  // handle error
  .catch(err => console.error(err))

Answer 2

zone.js: 192 Uncaught TypeError: Невозможно прочитать свойство 'then' с неопределенным значением в

Функция getBase64 не возвращает Promise.

Вам необходимо исправить getBase64 так, чтобы он возвращал Promise и был разрешен внутри reader.onload со значением reader.result:

function getBase64(file) {
  return new Promise(resolve, reject) => {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
      console.log("befor");
      console.log(reader.result);
      console.log("after");
      resolve(reader.result);
    };
    reader.onerror = function (error) {
      console.log('Error: ', error);
      reject(error);
    };
  }
}