Угловой считыватель файлов onloadend возвращает результат

Question

В Angular у меня есть следующий код, который записывает аудио, получает большой двоичный объект и преобразует его в base64, используя FileReader. Но я не могу вернуть эти данные base64 из метода onloadend для чтения файлов

  getRecordedAudio() {
    if (this.recordedAudio) {
      let fileReader = new FileReader();    
      fileReader.onloadend = function() {
        let base64data = fileReader.result;
        console.log('base64data-', base64data);
        // how to return here?
      };
      fileReader.readAsDataURL(this.recordedAudio);
    }
  }

Как я могу сделать это, используя callback или .then? Или любым другим способом?

Answer 1

Краткий ответ: вы не можете вернуться туда;

функция onloadend будет вызываться асинхронно, поэтому при возврате значение не будет отправлено никуда.

Вы можете напрямую вызвать службуиз этого onloadend чтобы отправить этот файл куда-нибудь (т. е. бэкэнд)

...
fileReader.onloadend = function() {
        let base64data = fileReader.result;
        console.log('base64data-', base64data);
        this.yourService.uploadFile(base64data)
      };
...

или сохранить его содержимое в переменной компонента

...
fileReader.onloadend = function() {
        let base64data = fileReader.result;
        console.log('base64data-', base64data);
        this.yourVariable = base64data;
      };
...

, также вы можете прочитать оFileReader объект, этот сайт объясняет это хорошо

fileReader.result, похоже, не возвращает строку base64 ... вам может потребоваться выполнить какое-то преобразование там.