角管:您提供了一个无效对象,该对象应在其中

时间:2018-12-04 13:37:49

标签: angular observable

我从这里取角管:Angular base64 image pipe, Maximum call stack size exceeded

import { Pipe, PipeTransform } from "@angular/core";
import { Http, RequestOptions, Headers, ResponseContentType } from "@angular/http";
import { Observable } from "rxjs/Observable";
import "rxjs/add/operator/map";
import "rxjs/add/operator/switchMap";

@Pipe({ name: "toBase64" })
export class ImagePipe implements PipeTransform {
  constructor(private http: Http) {}

  transform(url: string) {
    const headers = new Headers({
      "Content-Type": "image/*"
    }); /* tell that XHR is going to receive an image as response, so it can be then converted to blob */
    return this.http
      .get(url, new RequestOptions({ headers: headers, responseType: ResponseContentType.Blob })) // specify that response should be treated as blob data
      .map(response => response.blob()) // take the blob
      .switchMap(blob => {
        // return new observable which emits a base64 string when blob is converted to base64
        return Observable.create(observer => {
          const reader = new FileReader();
          reader.readAsDataURL(blob); // convert blob to base64
          reader.onloadend = function() {
            observer.next(reader.result); // emit the base64 string result
          };
        });
      });
  }
}

但是在我的项目npm-reset之后,我现在得到了:

VM8787:37 ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at subscribeTo (subscribeTo.js:41)
    at subscribeToResult (subscribeToResult.js:11)
    at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/switchMap.js.SwitchMapSubscriber._innerSub (switchMap.js:51)
    at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/switchMap.js.SwitchMapSubscriber._next (switchMap.js:41)
    at SwitchMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at XMLHttpRequest.onLoad (http.js:1053)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3811)

0 个答案:

没有答案