在前端开发中，文件上传是一个常见的需求。而为了提升用户体验，我们通常需要实现上传进度的监听。Angular 中利用 rxjs 进行文件上传及进度监听，不仅能够更好地实现这一需求，还能提升代码的复用性和可读性。
依赖
在使用 rxjs 进行文件上传和进度监听时，我们需要引用以下依赖：
import { HttpClient, HttpErrorResponse, HttpEventType, HttpEvent } from '@angular/common/http';
import { Observable, BehaviorSubject } from 'rxjs';
import { map } from 'rxjs/operators';其中，HttpClient 用于进行 http 请求，HttpErrorResponse 用于捕获错误，HttpEventType 和 HttpEvent 则用于实现进度监听。Observable 和 BehaviorSubject 则是 rxjs 中非常重要的两个类，用于实现响应式编程。
实现文件上传
下面是一个文件上传的示例代码：
-- -------------------- ---- -------
---------------- ------ ------------------ -
----- --- - -------------------------
----- --------- -------- - --- -----------
----------------------- ----- -----------
----- -------- - --- ---------------------------
----- --- - --- ------------------- ---- --------- -
--------------- ----
---
---------------------------------------- --------------- -- -
-- ----------- --- ----------------------------- -
----- ----------- - -------------- - ------------ - -------------
---------------------------
- ---- -- ----------- --- ----------------------- -
--------------------
-
---
------ ------------------------
-以上代码中，我们首先创建了一个 FormData 对象，用于存储要上传的文件。紧接着，我们创建了一个 BehaviorSubject 对象 progress，用于存储上传进度。请求参数 reportProgress 设置为 true，表示开启进度监听。
在 http 请求中，我们使用 HttpRequest 对象代替了 request 方法，且传入了 reportProgress 选项。当上传过程中，数据上传的进度变化时，http.request 会不断触发 HttpEventType.UploadProgress 事件，我们可以获取到已上传的数据长度和总长度，从而计算出上传进度，并将其存入 progress 中。当文件上传完毕时，http.request 会触发 HttpEventType.Response 事件，此时我们可以通过调用 progress.complete() 来结束上传进度的监听。
最后，我们将 progress 对象转换为 Observable 对象返回，作为文件上传的结果。在组件中，我们只需要调用 uploadFile 方法即可：
onFileSelected(event) {
const file: File = event.target.files[0];
this.uploadFile(file).subscribe(progress => {
console.log(progress);
});
}实现多文件上传
以上示例只能上传单个文件，如果需要上传多个文件，我们需要对代码进行一定的修改。
-- -------------------- ---- -------
------------------ ------------- ------------------------- -
----- --- - -------------------------
----- --------- -------- - --- -----------
-------------------- -- -
------------------------ ----- -----------
---
----- ------------ - --- ---------------------------------
----- --- - --- ------------------- ---- --------- -
--------------- ----
---
---------------------------------------- --------------- -- -
-- ----------- --- ----------------------------- -
----- ----------- - -------------- - ------------ - -------------
------------------------- - ------------------------------------------- - ------------------------- - --- ------------------------------------
- ---- -- ----------- --- ----------------------- -
----------------------------- -- ---------------------
-
---
------ --- ------------------------------------ -- -
----------------------------------------- -- ----------------------
----------------------
---
-以上代码中，我们使用 formData.append 方法逐一将文件添加至 FormData 对象中，然后创建一个 Array 用于存储多个文件的上传进度，每个文件对应一个 BehaviorSubject，然后采用 HttpRequest 对象进行请求。当上传进度产生变化时，我们不但需要计算出上传进度，还需要记录下当前文件的上传进度，并将其存入对应的 BehaviorSubject 中。在请求完成时，我们通过调用 progressList.forEach(progress => progress.complete()) 来结束监听。
最后，我们需要将上传进度的列表以 Observable 对象的形式返回给调用者，使用时，只需要先选择多个文件，再调用 uploadFiles 方法即可：
onFilesSelected(event) {
const files: Array<File> = Array.from(event.target.files);
this.uploadFiles(files).subscribe(progressList => {
progressList.forEach(progress => console.log(progress));
})
}总结
本文介绍了在 Angular 中利用 rxjs 操作文件上传及进度监听的方法，介绍了相关依赖，并给出了详细的示例代码，希望能对读者的开发工作有所帮助。通过利用 rxjs，我们可以更方便地实现文件上传及进度监听，提升了代码的复用性和可读性。同时，本文也提供了多文件上传的实现方式，读者可以根据自己的需求，进行相应的修改。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a115f748841e9894d5b360