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

目录

先决条件

第1步-创建Angular服务

第2步-实现上传方法

结论

---

先决条件

我们将仅看到如何实现用于发送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'  
    });  
}

结论

在这篇快速的操作方法文章中，我们实现了一项服务，用于将文件上传到服务器并侦听进度事件。