ASP.NET Core 2.0和Angular 4.3文件上傳進度

Question

使用新的Angular 4.3 HttpClient，如何在向客戶端報告上傳進度的同時上載和訪問ASP.NET Core 2.0控制器中的文件？

Answer 1

這裏是開始工作的例子：

HTML

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

---

打字稿

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!'); 
     }); 
    } 
} 

---

控制器

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

Answer 2

您可以使用接口Microsoft.AspNetCore.Http.IFormFile代表與HttpRequest一起發送的文件，以簡化對文件的訪問。

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