Rxjs 链将 observable<File> 转换为 observable<string>

Question

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

Answer 1

考虑以下辅助函数，它接受 aBlob作为参数并返回 an 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))

Answer 2

没有现成的方法可以将此加载的事件转换为 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

   }

})