Angular14文件上传：如何为多POST请求设置时间间隔

问题根源 #

你之前用timer(10000)时，所有文件的定时器会在循环里同时启动，10秒后所有上传请求会一起发起，达不到间隔效果。要实现逐个间隔上传，需要用RxJs的流操作来控制执行顺序和延迟。

代码实现 #

假设你已有上传服务uploadService，修改uploadFiles方法如下：

import { from, of, EMPTY, Subscription } from 'rxjs';
import { concatMap, delay, tap, catchError } from 'rxjs/operators';

// 组件内定义订阅引用，用于取消上传
uploadSubscription?: Subscription;

uploadFiles(files: File[]) {
  // 先取消之前的上传（如果有）
  this.cancelUpload();

  this.uploadSubscription = from(files).pipe(
    concatMap((file, index) => {
      // 第一个文件立即上传，后续每个文件间隔10秒发起请求
      const delayDuration = index === 0 ? 0 : 10000;
      return of(file).pipe(
        delay(delayDuration),
        concatMap(file => this.uploadService.upload(file))
      );
    }),
    tap(uploadRes => {
      // 处理单文件上传成功逻辑，比如更新进度、提示
      console.log(`文件 ${uploadRes.fileName} 上传完成`);
    }),
    catchError(err => {
      // 处理单文件上传失败逻辑，不中断后续上传
      console.error('上传失败', err);
      return EMPTY;
    })
  ).subscribe({
    complete: () => {
      // 所有文件上传完成后的逻辑
      console.log('全部文件上传完成');
    }
  });
}

// 取消正在进行的上传
cancelUpload() {
  this.uploadSubscription?.unsubscribe();
}

关键逻辑说明 #

• from(files)：把文件数组转为逐个发射的Observable，确保文件按顺序处理
• concatMap：强制前一个上传请求完成（或失败）后，再处理下一个文件，保证串行执行
• delay(delayDuration)：控制每个上传请求的发起时机，第一个文件无延迟，后续间隔10秒
• 保存uploadSubscription：通过调用unsubscribe()可以随时终止所有未完成的上传请求，满足你测试取消功能的需求

如果需要前一个上传完成后等待10秒再发起下一个（而非请求开始时间间隔10秒），可调整concatMap内的逻辑：

concatMap(file => this.uploadService.upload(file).pipe(
  delay(10000) // 上传完成后等待10秒，再处理下一个文件
))

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