RxJS mergeMap内部Observable未执行 文件上传请求不触发问题

文件上传请求完全未执行是RxJS用法错误导致的，具体问题点：

• Angular HttpClient 返回的是冷Observable，只有被订阅后才会发起实际网络请求。你在map操作符里调用postSingleFormData$后，既没有返回这个Observable实例，也没有手动订阅，请求根本不会触发。
• map操作符仅做同步值转换，不会处理内部返回的异步Observable，你当前写法只会同步遍历文件列表，不会等待、甚至不会触发内部的上传请求执行。
• 额外隐患：你当前构造FormData时用file.name作为文件字段的键，后端通常约定固定的字段名（比如file）接收文件，这种动态键的写法大概率会导致后端无法正确解析上传的文件。

将内部遍历的map换成支持异步流打平的mergeMap，正确返回上传Observable让外层流接管订阅触发请求，参考实现如下：

// 记得先导入需要的RxJS能力
// import { forkJoin } from 'rxjs';
// import { mergeMap } from 'rxjs/operators';

postOnboardingRequestDto$ = (onboardingRequestDto) => this.onboardingService.postOnboardingRequestDto(onboardingRequestDto);
postSingleFormData$ = (personId, formData) => this.httpClient.post<SaveResponse>(`/v2/api/onboarding/person/${personId}/document/DOCUMENT_TYPE`, formData);

confirmOnboardingRequest() {
  this.onboardingRequestIsSubmitted = true;

  this.postOnboardingRequestDto$(this.onboardingRequestDto).pipe(
    mergeMap((onboardingRequestDto) => {
      // 为每个文件构造上传任务Observable
      const uploadTasks = this.selectedFiles.map(file => {
        console.log(`准备上传文件：${file.name}`);
        const formData = new FormData();
        // 注意：第一个参数替换为后端约定的固定文件字段名，第三个参数传文件名保证后端能拿到正确的文件名
        formData.append('file', file, file.name);
        // 必须返回上传Observable，让流接管订阅逻辑
        return this.postSingleFormData$(onboardingRequestDto.onboardingPersonId, formData);
      })
      // forkJoin会并发执行所有上传任务，等全部完成后返回所有接口的响应结果
      // 如果需要控制并发数、或者按顺序上传，可以替换成对应的流组合方式
      return forkJoin(uploadTasks);
    })
  ).subscribe({
    next: (allUploadResults) => {
      console.log('所有文件上传完成', allUploadResults);
      // 此处编写上传成功后的业务逻辑
    },
    error: (err) => {
      console.error('提交流程出错', err);
      // 此处编写错误提示、状态重置逻辑
    }
  });
}

• 如果需要控制上传并发数（比如最多同时传3个文件，避免请求阻塞），可以把forkJoin(uploadTasks)替换成如下写法：

  from(uploadTasks).pipe(
    // 第二个参数即为最大并发数，改成1就是按顺序逐个上传
    mergeMap(task => task, 3)
  )
  

• 如果需要展示上传进度，可以在postSingleFormData$的请求配置里开启reportProgress参数，监听HttpEvent事件拿到进度值。

注意：所有HttpClient生成的Observable，只要没有被手动subscribe，或者没有被mergeMap/concatMap/switchMap/exhaustMap这类打平操作符接入到订阅流中，就永远不会发起实际请求，这是Angular RxJS场景下最常见的漏触发请求的原因。

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