【问题标题】：ASP.NET Core 2.0 and Angular 4.3 File Upload with progressASP.NET Core 2.0 和 Angular 4.3 文件上传进度
【发布时间】：2018-02-22 16:51:27
【问题描述】：

使用新的 Angular 4.3 HttpClient，如何在向客户端报告上传进度的同时上传和访问 ASP.NET Core 2.0 控制器中的文件？

【问题讨论】：

标签： angular asp.net-core asp.net-core-2.0 angular4-httpclient

【解决方案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
}

【讨论】：

我几乎完成了自己的解决方案，但被卡住了，取而代之的是这种令人敬畏的东西。谢谢
我找不到@angular/common/http

【解决方案2】：

您可以使用代表随 HttpRequest 发送的文件的接口 Microsoft.AspNetCore.Http.IFormFile 来简化对文件的访问。

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

【讨论】：