So senden Sie Dateien von Angular 2 an API

Question

Ich habe unter Code auf meiner Seite und versuchen, Dateien von WEB API hochzuladen. Ich habe versucht, indem ich die Dateien Daten in FormData an WEB API übergeben, aber ich bin nicht bewusst, wie gelesene Dateien, die in FormData gesendet werden.

Wie kann ich Dateien von angular nach WEB API senden und wie kann ich sie in API lesen?

Angular2 Frontend Teil

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

Angular2 Component

@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 Service

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

On-Frontend, senden wir Datei:

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

Im Dienst:

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-Controller

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

Sie können natürlich nutzen andere Möglichkeiten, um den Strom, einschließlich asynchroner diejenigen zu behandeln.