如何将文件从Angular 2发送到API

Question

我的页面中有下面的代码，并尝试从WEB API上传文件。我已经尝试通过将formData中的文件数据传递给WEB API，但我不知道如何读取在formData中发送的文件。

如何从角度发送文件到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(); 
    } 
} 

你可以，当然，用其他方式来处理数据流，包括异步的。