HTTP POSTメソッドを使用してファイルオブジェクトを返す方法

Question

ファイルオブジェクトを返すためにhttp POST要求を使用するにはどうすればよいですか。 POSTリクエストを使用してサーバーにファイルをアップロードすると、すべてが意図どおりに動作するため、ファイルが保存され、破損していないことがわかります。しかし、ファイルを取得しようとすると、私は奇妙な応答を得ます：console output

最後のコンソール出力は、サーバーにアップロードされたときのファイルの外観です。上記のコンソールエントリは、サーバーからファイルを取得しようとしたときに返される応答を示しています。ファイルが壊れていますか？

これは、サーバーに新しいファイルをアップロードする際に私のポストの要求です：

import { Component, OnInit } from '@angular/core'; 
import { Headers, Http } from '@angular/http'; 
import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 

@Injectable() 
export class ProfilePictureGrabService { 

    constructor(private http: Http) { } 

    currUser: string = localStorage.getItem('username'); 

    requestString: string = '/retrieveProfilePicture/' + this.currUser; 
    getProfilePic(): Observable<any> { 
    console.log(this.requestString); 
    // Get the json data string 
    return this.http.post(this.requestString , { 
     username: localStorage.getItem('username'), 
     subleaseISUcookie: localStorage.getItem('subleaseISUcookie') 
    }).map(res => { 

     return res; 
    }); 
    } 
    private handleError(error: any): Promise<any> { 
     console.error('An error occurred', error); // for demo purposes only 
     return Promise.reject(error.message || error); 
    } 

} 

そして最後に、これは私が呼び出す方法です：

formData.append('username', localStorage.getItem('username')); 
formData.append('subleaseISUcookie', localStorage.getItem('subleaseISUcookie')); 
if(fileCount > 0){ 
    formData.append('fileName', inputEl.files[0]); 
    console.log(inputEl.files[0]); 
    this.http.post(URL, formData).subscribe(
      res => { 
       //console.log(res); 
       if(!res['error']){ 
     console.log("no error"); 
     } else { 
     console.log(res['error']); 
     } 
     //this.router.navigate(['login']); 
      }, 
      err => { 
      console.log("there was an error"); 
     console.log(err); 
      } 
     );  
} 

をこれは私がサーバーからファイルをつかむ方法ですhttp postリクエストによって返されたファイルオブジェクトを使用する上記のサービス：

this.profilePictureGrabService.getProfilePic().subscribe(any => { 
    this.retrievePic = any; 
    console.log(this.retrievePic); 
}); 

var reader2 = new FileReader(); 
this.profilePic = this.retrievePic; 
if(this.profilePic){ 
    reader2.readAsDataURL(this.profilePic); 
}else{ 
} 
reader2.onload = function(){ 
    //localStorage.setItem('profPic', JSON.stringify(inputEl.files[0])); 
    (<HTMLImageElement>document.getElementById('profilePic')).src = reader2.result; 
} 

Answer 1

In your ProfilePictureGrabService class do, 

    import { Headers, RequestOptions } from '@angular/http'; 
    @Injectable() 
    export class ProfilePictureGrabService { 
     headers: any; 
     options: any 
     constructor(private http: Http) { 

      this.headers = new Headers({ 'Content-Type': 'text/plain' }); 
      this.options = new RequestOptions({ headers: this.headers }); 
     } 

currUser: string = localStorage.getItem('username'); 

    requestString: string = '/retrieveProfilePicture/' + this.currUser; 
    getProfilePic(): Observable<any> { 
    console.log(this.requestString); 
    // Get the json data string 
    return this.http.post(this.requestString , { 
     username: localStorage.getItem('username'), 
     subleaseISUcookie: localStorage.getItem('subleaseISUcookie') 
    },this.options).map(res => { 

     return res; 
    }); 
    }