如何在TypeScript中实现多文件上传（不使用React/Angular）

基于你提供的单文件上传代码，以下是改造后的多文件上传实现方案：

1. HTML 结构（保留原有属性） #

<input name="myfile" type="file" multiple />

multiple属性已开启，支持选择多个文件

2. 重构接口定义 #

原接口仅适配单个文件路径，现在调整为支持多文件集合的类型：

// 单个文件的元数据接口（可按需扩展更多字段）
export interface IFileItem {
  name: string;
  size: number;
  type: string;
}

// 多文件上传的核心接口
export interface IFileUpload {
  filePaths: string; // 对应input的value（逗号分隔的文件名）
  fileList: IFileItem[]; // 完整的文件元数据列表
}

3. 改造FileElement类 #

调整Getter/Setter以支持多文件，同时完善文件处理逻辑：

class FileElement extends HTMLElement {
  // 获取input的value（逗号分隔的文件名）
  get uploadFilePaths(): string {
    return (this.querySelector('[name="myfile"]') as HTMLInputElement).value;
  }

  // 重置文件选择（浏览器安全限制，无法直接设置具体文件值）
  set uploadFilePaths(_: string) {
    (this.querySelector('[name="myfile"]') as HTMLInputElement).value = "";
  }

  // 获取完整的文件元数据列表
  get uploadFileList(): IFileItem[] {
    const input = this.querySelector('[name="myfile"]') as HTMLInputElement;
    return Array.from(input.files || []).map(file => ({
      name: file.name,
      size: file.size,
      type: file.type
    }));
  }

  constructor() {
    super();
    // 绑定文件选择事件
    this.querySelector('[name="myfile"]')?.addEventListener('change', this.fileHandler.bind(this));
  }

  private fileHandler(evt: Event): void {
    // 组装多文件数据
    const fileData: IFileUpload = {
      filePaths: this.uploadFilePaths,
      fileList: this.uploadFileList
    };

    // 组装FormData用于上传（后端可通过files[]字段接收）
    const formData = new FormData();
    const inputFiles = (evt.target as HTMLInputElement).files;
    if (inputFiles) {
      Array.from(inputFiles).forEach(file => {
        formData.append('files[]', file);
      });
    }

    // 示例：打印文件数据（可替换为实际上传逻辑）
    console.log('选中的文件详情:', fileData);
    console.log('待上传的FormData:', formData);
  }
}

// 注册为自定义元素（如需作为独立组件使用）
customElements.define('file-uploader', FileElement);

关键改动说明： #

• Getter拆分：将原有的单文件属性拆分为uploadFilePaths（文件名字符串）和uploadFileList（完整文件元数据），适配多文件场景需求
• Setter限制：受浏览器安全策略约束，无法直接设置input的文件值，因此Setter仅用于重置文件选择状态
• 事件自绑定：在构造函数中主动绑定change事件，确保组件逻辑自包含
• 上传数据组装：实现了多文件上传常用的FormData处理逻辑，可直接对接后端接口

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