ASP.NET Core 2.0 和 Angular 4.3 文件上传有进展
ASP.NET Core 2.0 and Angular 4.3 File Upload with progress
使用新的 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>
TypeScript
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
}
您可以使用表示随 HttpRequest 发送的文件的接口 Microsoft.AspNetCore.Http.IFormFile 来简化对文件的访问。
[HttpPost, DisableRequestSizeLimit, Route("api/files")]
public async Task UploadFiles(IFormFile file){
//your file stream
var stream = file.OpenReadStream();
}
使用新的 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>
TypeScript
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
}
您可以使用表示随 HttpRequest 发送的文件的接口 Microsoft.AspNetCore.Http.IFormFile 来简化对文件的访问。
[HttpPost, DisableRequestSizeLimit, Route("api/files")]
public async Task UploadFiles(IFormFile file){
//your file stream
var stream = file.OpenReadStream();
}