ASP.NET Core 2.0和Angular 4.3文件上传进度

概述使用新的Angular 4.3 HttpClient,如何在向客户端上报上传进度的同时上传和访问ASP.NET Core 2.0控制器中的文件？ 这是一个开始的工作示例： HTML <input #file type="file" multiple (change)="upload(file.files)" /><span *ngIf="uploadProgress > 0 && uploadP 使用新的Angular 4.3 HttpClient,如何在向客户端上报上传进度的同时上传和访问ASP.NET Core 2.0控制器中的文件？解决方法 这是一个开始的工作示例：

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}

总结

以上是内存溢出为你收集整理的ASP.NET Core 2.0和Angular 4.3文件上传进度全部内容，希望文章能够帮你解决ASP.NET Core 2.0和Angular 4.3文件上传进度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。