如何配置<input>实现React+TS场景下多目录上传时每个目录仅取单个MP4文件

算力阿峰

2026-10-7

解决方案

1. 调整input标签配置，解决webkitdirectory的TS报错

webkitdirectory是浏览器普遍支持的目录选择属性，TS报错是因为该属性不属于W3C标准属性，React的默认类型定义未收录，你可以选择任意一种方式解决：

方案A：单行跳过TS校验，直接在input标签添加属性
对应修改后的代码如下：

fileRef = React.createRef<HTMLInputElement>();

<Button 
  content="Choose File" 
  icon="file" 
  onClick={() => this.fileRef.current?.click()} 
/>
<input 
  id="filepicker" 
  type="file" 
  ref={this.fileRef} 
  onChange={this.fileChange} 
  multiple
  hidden
  accept=".mp4"
  // @ts-ignore
  webkitdirectory
/>

方案B：动态给DOM元素设置属性，完全绕开类型校验
如果你不想使用@ts-ignore注释，可以修改按钮点击逻辑：

<Button 
  content="Choose File" 
  icon="file" 
  onClick={() => {
    if (this.fileRef.current) {
      (this.fileRef.current as any).webkitdirectory = true;
      this.fileRef.current.click();
    }
  }} 
/>

2. 修改文件选择回调，过滤仅保留.mp4文件

选择目录时浏览器的accept属性不会自动生效，需要手动过滤文件：

fileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const rawFiles = e.target.files;
  if (!rawFiles) return;

  // 遍历所有选中目录的文件，仅保留mp4格式（不区分大小写）
  const uploadFiles = Array.from(rawFiles).filter(file => 
    file.name.toLowerCase().endsWith('.mp4')
  );

  // 此处替换为你原有上传逻辑，uploadFiles即为待上传的mp4文件列表
  // 上传完成后清空input值，避免重复选择同目录不触发回调
  e.target.value = '';
}