Angular 9/8 多文件上传服务，附带进度报告

在本教程中，我们将学习如何使用 Angular 9 构建一个多文件/图像上传服务，该服务允许您通过 POST 请求方法上传文件到远程服务器，并监听进度事件。

必备组件

我们将只演示如何实现该服务以发送 POST 请求来上传文件并监听进度事件，但我们将不会从头开始创建一个项目，因此您需要安装 Angular CLI 并初始化一个项目。

步骤 1 - 创建 Angular 服务

打开一个新的终端并运行以下命令以生成服务

$ ng generate service upload

接下来，打开 src/app/upload.service.ts 文件并导入以下内容

import { HttpClient, HttpEvent, HttpErrorResponse, HttpEventType } 
         from  '@angular/common/http';  
import { map } from  'rxjs/operators';

接下来，通过服务构造函数注入 HttpClient

@Injectable({  
  providedIn: 'root'  
})  
export class UploadService { 
	constructor(private httpClient: HttpClient) { }

步骤 2 - 实现上传方法

接下来，添加 upload() 方法，该方法简单地调用 HttpClient 的 post() 方法，以使用表单数据发送 HTTP POST 请求到文件上传服务器

public upload(fileData) {

	return this.httpClient.post<any>("https://file.io/", fileData, {  
      reportProgress: true,  
      observe: 'events'  
    });  
}

结论

在这篇快速教程中，我们实现了一个用于将文件上传到服务器并监听进度事件的服务。