Angular HttpClient upload file with FormData

最新推荐文章于 2021-12-28 16:34:49 发布

dechen6073

最新推荐文章于 2021-12-28 16:34:49 发布

阅读量451

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dhcn/p/7802667.html

版权

本文介绍如何在ASP.NET Core 2.0与Angular 4.3中实现多文件上传，并展示进度条。通过使用HttpClient与FormData接口，组件能够处理文件选择事件，上传文件并显示上传进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从sof上找到一个example：https://stackoverflow.com/questions/46206643/asp-net-core-2-0-and-angular-4-3-file-upload-with-progress，不但上传文件，而且支持多文件：

模板代码：

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