用于将可观察<File>转换为可观察的 Rxjs 链<string> (base64)

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

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

考虑下面的helper函数，它接受Blob作为参数并返回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))