Angular异步多文件上传逻辑优化及FileList创建方案咨询

Hey，针对你提到的两个问题，我来给你一步步梳理优化方案，先看现有代码的痛点，再给出可扩展的解决办法~

你当前的代码针对2个文件就写了3个if分支，要是扩展到5个文件，分支会爆炸，而且嵌套的then会导致回调地狱，维护性极差。这里推荐用Angular原生的RxJS来管理异步流，不管是并行还是串行上传，都能轻松扩展。

第一步：重构上传服务（改用Observable） #

Angular更推荐用Observable而非Promise来处理异步操作，先把你的上传服务改成返回Observable：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UploadService {
  makeFileRequest(url: string, files: Array<File>, name: string): Observable<any> {
    return new Observable((observer) => {
      const formData = new FormData();
      const xhr = new XMLHttpRequest();

      // 仅当有文件时处理
      if (files?.length) {
        files.forEach(file => formData.append(name, file, file.name));
      }

      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            observer.next(JSON.parse(xhr.response));
            observer.complete();
          } else {
            observer.error(xhr.response);
          }
        }
      };

      xhr.open('POST', url, true);
      xhr.send(formData);
    });
  }
}

第二步：组件中用RxJS操作符管理多上传任务 #

把需要上传的文件和对应的接口URL整理成任务数组，然后用forkJoin（并行上传，适合无依赖的场景）或concatMap（串行上传，适合有先后顺序要求的场景）批量处理：

// 在updateUser的subscribe回调中替换原来的多个if
if (response.user) {
  const uploadTasks: Observable<any>[] = [];
  const userId = response.user._id;

  // 逐个添加上传任务——不管是2个还是5个，直接加就行
  if (this.filesToUpload1?.length) {
    uploadTasks.push(
      this._uploadService.makeFileRequest(
        `${Global.url}/upload-user-image-logo/${userId}`,
        this.filesToUpload1,
        'image'
      )
    );
  }
  if (this.filesToUpload2?.length) {
    uploadTasks.push(
      this._uploadService.makeFileRequest(
        `${Global.url}/upload-user-image-banner/${userId}`,
        this.filesToUpload2,
        'image'
      )
    );
  }
  // 扩展到5个文件？直接继续加：
  // if (this.filesToUpload3?.length) { ... }
  // if (this.filesToUpload4?.length) { ... }
  // if (this.filesToUpload5?.length) { ... }

  // 并行处理所有上传任务（后端允许同时上传时用这个）
  forkJoin(uploadTasks).subscribe({
    next: (results) => {
      // 每个任务的结果按顺序存在results数组中
      results.forEach(result => this.userDetails = result.user);
      // 清空所有文件
      this.filesToUpload1 = this.filesToUpload2 = null;
      // this.filesToUpload3 = this.filesToUpload4 = this.filesToUpload5 = null;
    },
    error: (err) => console.error('上传失败:', err)
  });

  // 如果需要串行上传（比如必须先传logo再传banner），改用concatMap：
  // from(uploadTasks).pipe(concatMap(task => task)).subscribe({
  //   next: (result) => this.userDetails = result.user,
  //   error: (err) => console.error('上传失败:', err),
  //   complete: () => { /* 清空文件 */ }
  // });
}

这样改造后，不管你要处理多少个文件，只需要往uploadTasks数组里加任务即可，完全不用修改分支逻辑，代码扩展性拉满。

FileList是浏览器原生的只读对象，不能直接通过new创建，不过可以用DataTransfer API来模拟生成合并后的FileList：

封装一个工具方法 #

在你的组件中添加这个方法，用来合并多个File数组为FileList：

createCombinedFileList(...fileArrays: File[][]): FileList | null {
  // 没有文件则返回null
  if (!fileArrays.some(arr => arr.length)) return null;

  const dataTransfer = new DataTransfer();
  // 遍历所有文件数组，添加到DataTransfer中
  fileArrays.forEach(files => {
    files.forEach(file => dataTransfer.items.add(file));
  });

  // 返回生成的FileList
  return dataTransfer.files;
}

使用示例 #

比如合并filesToUpload1和filesToUpload2：

// 合并两个输入源的文件
const combinedFileList = this.createCombinedFileList(
  this.filesToUpload1 || [],
  this.filesToUpload2 || []
);

// 此时combinedFileList就是标准的FileList对象，可以传给需要FileList类型的API

额外优化：文件选择事件处理 #

你的fileChangeEvent可以简化一下，用Array.from把FileList转成数组更直观：

fileChangeEvent1(fileInput: any): void {
  const files = fileInput.target.files as FileList;
  this.filesToUpload1 = files.length ? Array.from(files) : null;
  this.imageLogoStatus = !!this.filesToUpload1;
}

fileChangeEvent2(fileInput: any): void {
  const files = fileInput.target.files as FileList;
  this.filesToUpload2 = files.length ? Array.from(files) : null;
  this.imageBannerStatus = !!this.filesToUpload2;
}

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