Angular filereader onloadend возвращает результат

В 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? Или любым другим способом?


angular callback filereader onload asynchronous-javascript
person user5155835    schedule 20.10.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

функция 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... вам может понадобиться выполнить некоторое преобразование.

person The Fabio    schedule 20.10.2019
comment
вы также можете вернуть обещание или использовать наблюдаемое, что бы вы сделали с содержимым переменной base64data? больше javascript или отправить его куда-нибудь? - person The Fabio; 20.10.2019
comment
Я хочу отправить данные base64 на сервер и воспроизвести их с помощью аудиоэлемента - person user5155835; 20.10.2019
comment
Я предлагаю вам использовать сервисный подход, описанный выше. я только что обновил ответ некоторыми ресурсами, которые вы можете использовать, - person The Fabio; 20.10.2019
comment
Спасибо. Вы можете ответить на это? stackoverflow.com/questions/58473636/ это связано - person user5155835; 20.10.2019