您当前的位置: 首页 >  ar

寒冰屋

暂无认证

  • 0浏览

    0关注

    2286博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

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

寒冰屋 发布时间:2020-01-15 20:17:52 ,浏览量:0

目录

先决条件

第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'  
    });  
}
结论

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

关注
打赏
1665926880
查看更多评论
立即登录/注册

微信扫码登录

0.0433s