Rxjs 链将 observable<File> 转换为 observable<string> (base64)

Question

我有一个工作代码可以将我的文件对象转换为 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 事件的帮助下完成的。有什么方法可以将此事件转换为新的可观察对象并将其传递给链吗？

Answer 1

没有开箱即用的方法可以将此加载的事件转换为 rxjs observable。您将不得不创建自己的操作员。

export const dataUrlToObs = myFile => new Observable<string | ArrayBuffer>(subscriber => {
  const reader = new FileReader();
  reader.readAsDataURL(myFile);
  reader.onload = () => {subscriber.next(reader.result); subscriber.complete(); };
  reader.onerror = () => subscriber.error(reader.error);
  return () => reader.abort(); // cancel function in case you unsubscribe from the obs
}

以后可以这样使用：

..chain
switchMap(myFile => dataUrlToObs(myFile)),
tap(resultStrOrArrayBuf => {
   if (!(resultStrOrArrayBuf instanceof ArrayBuffer)) {
         ..do something with resultStrOrArrayBuf
   }
})

Answer 2

考虑以下辅助函数，它接受一个 Blob 作为参数和 return 一个 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))

Rxjs 链将 observable<File> 转换为 observable<string> (base64)

Rxjs chain to convert observable<File> to observable<string> (base64)

javascript

dom-events

rxjs

angular

rxjs-observables