如何將文件從Angular 2發送到API

Question

我的頁面中有以下代碼，並嘗試從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";
    }

Answer 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();
    }
}

當然，您可以使用其他方式來處理流，包括異步方式。