带有进度报告的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()方法,该方法只需调用HttpClientpost()方法,即可向文件上载服务器发送带有表单数据的HTTP  POST请求:

public upload(fileData) {

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

结论

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

发布了70 篇原创文章 · 获赞 130 · 访问量 42万+

猜你喜欢

转载自blog.csdn.net/mzl87/article/details/103995505