React中如何获取FileList对象中的文件名？

数据老陈

2026-7-20

解决FileList中获取文件名的问题

问题根源

状态存储错误：你直接将event.target.files（这是一个FileList类数组对象）存入了filepath数组，导致数组里存储的是整个FileList对象，而非单个File实例。
遍历方式错误：for...in循环遍历的是对象的可枚举属性名，对于FileList来说，这些属性名就是索引字符串（如"0"、"1"），而非File对象，所以你尝试file[0].name自然会得到undefined。

修复步骤

1. 修正文件状态存储逻辑

在handleUpload中，将FileList转换为真正的数组，把每个File对象单独存入状态：

const handleUpload = (event) => {
  // 用扩展运算符将FileList转为数组，再合并到现有状态
  setFilepath(prev => [...prev, ...event.target.files]);
}

这里使用函数式更新prev => ...是因为setState是异步操作，确保每次更新都基于最新的状态值。

2. 正确遍历获取文件名

在handleSubmit中，直接遍历存储的File对象数组，用for...of或者forEach：

const handleSubmit = async (e) => {
  e.preventDefault();
  console.log(filepath);
  // 遍历每个File对象
  for (const file of filepath) {
    console.log("files are: " + file.name);
  }
  // 或者用forEach
  // filepath.forEach(file => console.log("files are: " + file.name));
}

完整修正后的RawForm组件

const RawForm = () => {
  const [filepath, setFilepath] = useState([]);

  const handleUpload = (event) => {
    setFilepath(prev => [...prev, ...event.target.files]);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    console.log(filepath);
    for (const file of filepath) {
      console.log("files are: " + file.name);
    }
  };

  return (
    <>
      <Upload onUpload={handleUpload}/>
      <Submit onSubmit={handleSubmit}/>
    </>
  );
};