angular - Angular filereader onloadend 返回结果

Question

在 Angular 中，我有以下代码，它使用 FileReader 记录音频、获取 blob 并将其转换为 base64。但我无法从文件阅读器的 onloadend 方法返回这个 base64 数据

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

我怎样才能使用callbackor来做到这一点.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 字符串...您可能需要在那里进行一些转换。