ASP.NET Core 2.0 und Angular 4.3 Datei-Upload mit Fortschritt

Question

Wie kann ich mit dem neuen Angular 4.3 HttpClient Dateien in einen ASP.NET Core 2.0-Controller hochladen und darauf zugreifen, während der Upload-Fortschritt an den Client gemeldet wird? Hier

Answer 1

ist ein funktionierendes Beispiel, um loszulegen:

HTML

<input #file type="file" multiple (change)="upload(file.files)" /> 
<span *ngIf="uploadProgress > 0 && uploadProgress < 100"> 
    {{uploadProgress}}% 
</span> 

---

Typoskript

import { Component } from '@angular/core'; 
import { HttpClient, HttpRequest, HttpEventType, HttpResponse } from '@angular/common/http' 

@Component({ 
    selector: 'files', 
    templateUrl: './files.component.html', 
}) 
export class FilesComponent { 
    public uploadProgress: number; 

    constructor(private http: HttpClient) { } 

    upload(files) { 
     if (files.length === 0) 
      return; 

     const formData = new FormData(); 

     for (let file of files) 
      formData.append(file.name, file); 

     const req = new HttpRequest('POST', `api/files`, formData, { 
      reportProgress: true, 
     }); 

     this.http.request(req).subscribe(event => { 
      if (event.type === HttpEventType.UploadProgress) 
       this.uploadProgress = Math.round(100 * event.loaded/event.total); 
      else if (event instanceof HttpResponse) 
       console.log('Files uploaded!'); 
     }); 
    } 
} 

---

-Controller

[HttpPost, DisableRequestSizeLimit, Route("api/files")] 
public async Task UploadFiles() 
{ 
    var files = Request.Form.Files; // now you have them 
} 

Answer 2

Sie könnten die Schnittstelle Microsoft.AspNetCore.Http.IFormFile verwenden, die eine mit der HttpRequest gesendete Datei darstellt, um den Zugriff auf die Datei zu vereinfachen.

[HttpPost, DisableRequestSizeLimit, Route("api/files")] 
public async Task UploadFiles(IFormFile file){ 
    //your file stream 
    var stream = file.OpenReadStream(); 
}