Angular(v4)中基于RxJS实现拖拽文件逐个上传的最优方案

嘿，这个需求我之前做项目时刚好碰到过！要实现前一个文件拿到服务器响应后再发起下一个上传请求，用RxJS的concatMap（适配Angular 4对应的RxJS 5.x版本）就能完美解决，这也是这种串行依赖场景的最优方案。

核心思路 #

你的场景需要串行处理异步操作：每个上传请求必须等前一个的服务器响应返回（也就是上传的Observable完成）后，再发起下一个。RxJS里的concatMap刚好就是干这个的——它会等待当前Observable完成后，才会订阅并处理下一个数据源。

具体实现（适配Angular 4 + RxJS 5.x） #

假设你已经拿到用户选择的文件数组selectedFiles: File[]，先调用addPreview展示所有预览图，再用以下代码实现串行上传：

// 先导入RxJS必要的操作符和类（Angular 4对应RxJS 5.x）
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/concatMap';
import 'rxjs/add/operator/catch';

// 第一步：先展示所有图片预览，这部分逻辑保留不变
this.selectedFiles.forEach(file => this.addPreview(file));

// 第二步：按顺序逐个发起上传请求
Observable.from(this.selectedFiles)
  // concatMap：等待前一个上传请求的Observable完成后，再处理下一个文件
  .concatMap(file => {
    // 调用你的uploadFile方法，它返回的是一个Observable（对应Redux action的异步效果）
    return this.uploadFile(file)
      // 可选：如果某个文件上传失败，不中断后续上传的话，添加catch处理
      .catch(err => {
        console.error(`文件 ${file.name} 上传失败`, err);
        // 返回一个空的完成Observable，让concatMap继续处理下一个文件
        return Observable.of(null);
      });
  })
  .subscribe(
    (response) => {
      if (response) {
        // 单个文件上传成功后的回调，比如更新Redux状态、提示用户等
        console.log(`文件 ${response.fileName} 上传成功`);
      }
    },
    (globalErr) => {
      // 全局错误捕获（如果没有在catch里处理的话会走到这里）
      console.error('上传流程出现异常:', globalErr);
    },
    () => {
      // 所有文件上传完成后的回调
      console.log('所有文件已完成上传！');
    }
  );

关键细节解释 #

1. Observable.from(this.selectedFiles)：把文件数组转换成一个Observable序列，它会逐个发射数组里的每个文件，相当于把同步数组变成了异步的数据源。
2. concatMap的作用：它会订阅每个文件对应的上传Observable，并且必须等当前上传的Observable完成（也就是拿到服务器响应），才会订阅下一个文件的上传请求，完美实现你要的“逐个发起、前一个完成再走下一个”的逻辑。
3. 错误处理：如果希望某个文件上传失败后，后续文件继续上传，就用catch操作符捕获单个上传的错误，返回一个完成的Observable（比如Observable.of(null)），这样concatMap就会继续处理下一个文件。如果想中断整个上传流程，就不用加这个catch，一旦出错就会走到subscribe的错误回调里。

为什么这是最优方案？ #

• 完全贴合RxJS的异步流处理思想，代码简洁且符合Angular/Redux的技术栈风格。
• concatMap是专门处理串行异步依赖的操作符，性能和可读性都比手动写递归、Promise链式调用要好得多。
• 完美适配你现有的uploadFile（基于Redux action的异步调用），不需要大幅修改现有逻辑。

内容的提问来源于stack exchange，提问作者Lionel Piroche