角2/4 FileReaderサービス

Question

ファイルをアップロードするためにAngular 2/4 Serviceを作成しようとしていました。私はどんなリソースでも解決策を見つけることができませんでしたので、おそらく皆さんに尋ねたいと思います。そのアイデアはComponentのどこかにあるので、type = fileという入力フィールドがあります。ディレクティブ（change）= "uploadFile（$ event）"を持っています。コンポーネント.TSファイルで ：

uploadFile(event) { 
    this.images.push(this.uploadImgService.uploadImage(event)); 
} 

UploadImgServiceはこのようになります：

だから、

private img: string; 

uploadImage(e) { 
    const file = e.target.files[0]; 
    const pattern = /image-*/; 

    if (!file.type.match(pattern)) { 
    alert('You are trying to upload not Image. Please choose image.'); 
    return; 
    } 
    const reader = new FileReader(); 
    reader.readAsDataURL(file); 
    reader.onloadend =() => { 
    this.img = reader.result; 
    }; 

    return this.img; 
} 

、私はその操作は非同期に起こっている理解し、私は道も、それをラップする方法を見つけ出すことはできませんimgが読み込まれるまで待つことができます。私はスキルの欠如の結果だと思う:( コンポーネントにこのコードを投稿すると、確かに動作しますが、私の考えはサービスを作ることです。 また、私はAngularの初心者です。 。！、観察に加入し、

uploadImage(e) { 
    const file = e.target.files[0]; 
    const pattern = /image-*/; 

    if (!file.type.match(pattern)) { 
    alert('You are trying to upload not Image. Please choose image.'); 
    return; 
    } 
    const reader = new FileReader(); 
    reader.readAsDataURL(file); 
    return Observable.create(observer => { 
    reader.onloadend =() => { 
     observer.next(reader.result); 
     observer.complete(); 
    }; 
    }); 
} 

とコンポーネントで：私はあなたから聞いて喜んでいるだろう、このアイデアをreilizeのおかげ

Answer 1

あなたがそうのように観察を返すべき道

this.service.uploadImage(event).subscribe((img) => { 
    // Do what you want with the image here 
});