时间戳

首页 > 解决方案 > Rxjs 链转换 observable可观察的(base64)

javascript - Rxjs 链转换 observable可观察的(base64)

问题描述

我有一个工作代码可以将我的 File 对象转换为 base64：

let reader = new FileReader();
     reader.readAsDataURL(myFile);
     reader.onload = () => {
         let resultStrOrArrayBuf = reader.result;
         if (!(resultStrOrArrayBuf instanceof ArrayBuffer)) {
            ..do something with resultStrOrArrayBuf
         }
    };

但是我现在必须将这部分集成到现有的 rxjs 链中。在链中，我收到 File 对象并希望继续使用 base64 转换结果。但是，转换是在onload事件的帮助下完成的。有没有办法将此事件转换为新的可观察对象并将其传递给链？

标签： javascriptangularrxjsdom-eventsrxjs-observables

解决方案

考虑以下辅助函数，它接受 aBlob作为参数并返回 a Observable<string>：

function blobToBase64(blob: Blob): Observable<string> {
  return new Observable<string>(observer => {
      const reader = new FileReader();
      reader.onerror = observer.error;
      reader.onabort = observer.error;
      reader.onload = () => observer.next(reader.result as string);
      reader.onloadend = observer.complete;
      reader.readAsDataURL(blob);

      return {
        unsubscribe: reader.abort
      }
  })
}

用法：

declare const fileObservable: Observable<File>;

fileObservable
  .pipe(switchMap(blobToBase64))
  .subscribe(base64 => console.log(base64))

推荐阅读