javascript - Angular 2 から API にファイルを送信する方法

私のページには以下のコードがあり、WEB APIからファイルをアップロードしようとしています。formDataにファイルのデータを渡してWEB APIに送信することは試しましたが、formDataで送信されたファイルをどのように読み取るかはわかりません。

AngularからWEB APIにファイルを送信するにはどうすればよいですか、そしてAPIでそれらをどのように読み取ることができますか？

Angular2 フロントエンド部分

<input #fileInput type="file"/>
<button (click)="addFile()">Add</button>

Angular2 コンポーネント

@ViewChild("fileInput") fileInput;

addFile(): void {
    let fi = this.fileInput.nativeElement;
    if (fi.files && fi.files[0]) {
        let fileToUpload = fi.files[0];
        this.uploadService
            .upload(fileToUpload)
            .subscribe(res => {
                console.log(res);
            });
    }
}

Angular2 アップロードサービス

upload(fileToUpload: any) {
 
// var input =?? ; How can I send files to WEBAPI controller action.
    return this.http
        .post("/api/uploadFile", input);
}

WEB API

[HttpPost]
    public string uploadFile()
    {
   // How can I handle files which are sent from UI
        return "uploaded";
    }

回答 #1

フロントエンドでは、ファイルを送信します:

this.uploadService
    .upload(theFile)
    .subscribe(
        res => console.log('Uploaded file with content:', res),
        err => console.error('Failed with error:', error)
    );

サービス中に：

upload(fileToUpload) {
    return this.http.post('api/file/endpoint',
        fileToUpload,
        new HttpHeaders().set('Content-Type', 'application/octet-stream')
    )
    .map(res => res.text()); //mapping to text just to see the string response propagated to component subscribe
}

ASP.NET コントローラー

[Route("api/file/endpoint")]
[HttpPost]
public string GetFile()
{
    using (var stream = new StreamReader(Request.Body))
    {
        return stream.ReadToEnd();
    }
}

もちろん、非同期のものを含め、ストリームを処理するために他の方法を使うこともできます。