目录
先决条件
第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("https://file.io/", fileData, {
reportProgress: true,
observe: 'events'
});
}
结论
在这篇快速的操作方法文章中,我们实现了一项服务,用于将文件上传到服务器并侦听进度事件。