Observableでxhr.send（）の後にサーバーの応答を取得

Question

Angular 2アプリケーションでファイルをPOSTするメソッドを実装しました。それは私が見つけた解決策に基づいていますhere。

Angular 2はファイルアップロードを単独でサポートしていないため、解決方法はxhrを利用する必要があります。

コンポーネント方法：

onSubmit(): void { 
    this.inputModuleService.postFile(this.files).subscribe(() => { 
     console.log('sent'); 
    }); 
} 

サービス方法：

postFile (files: File[]): Observable<string> { 
    var url = this.uploadURL; 

    return Observable.create(observer => { 
     var formData: FormData = new FormData() 
     var xhr: XMLHttpRequest = new XMLHttpRequest(); 

     formData.append("upload", files[i], files[i].name); 

     xhr.onreadystatechange =() => { 
      if (xhr.readyState === 4) { 
       if (xhr.status === 200) { 
        observer.next(JSON.parse(xhr.response)); 
        observer.complete(); 
       } else { 
       observer.error(xhr.response); 
       } 
      } 
     }; 

     xhr.open('POST', url, true); 
     xhr.send(formData); 
    }); 
} 

私の問題は、私は戻って応答を取得する方法を理解していないということですがこれは実用的なソリューションは、次のようになりますxhr.send()の呼び出しの後にonSubmit()メソッドに渡します。 Angular2とObservableと約束のコンセプトは私にとって初めてのものです。

この監視対象からサーバーの応答を取得するにはどうすればよいですか？

Answer 1

サーバの応答はsubscribe()の成功とエラーコールバックに提供されます。

onSubmit(): void { 
    this.inputModuleService.postFile(this.files).subscribe(
     response => { 
      //response is the server's response, parsed into a javascript object 
      console.log('server responded: ', response); 
     }, 
     error => { 
      //server response emitted when xhr.status !== 200 
      console.error(error); 
     } 
    ); 
} 

この行を：iが定義されていないので

formData.append("upload", files[i], files[i].name); 

は、エラーをスローします。コピー元のコードにループ内のその行があり、iが現在のインデックスでした。それはあなたのコードでは当てはまりません。

あなたの関数宣言：postFileによって返された観察可能なオブジェクトではなく、文字列を発するので

postFile (files: File[]): Observable<string> 

が

postFile (files: File[]): Observable<any> 

に変更する必要があります。

あなたが1つのファイルだけをアップロードすることを意味している場合、あなたはまた、file: Fileにfiles: File[]を変更して、ファイルを追加する必要があります

formData.append("upload", file, file.name);