多文件上传时如何同时获取文件名和文件对象？

南宫红彦提问于 2026-02-12 00:55:39 阅读 17

交互

我现在在做一个多文件上传功能，用户选多个文件后，想同时获取文件名数组和每个文件的File对象。但发现当用户选了多个文件后，input的files属性虽然能拿到FileList，但直接console.log显示的是[FileList]，遍历的时候只能看到名字，size和type都拿不到。试过用Array.from(input.files)转数组，但控制台打印每个元素还是[object File]，没详细信息，该怎么处理？

代码是这样的：<input type="file" multiple>，事件监听用了onChange获取files，但控制台输出：


const handleFiles = (e) => {
  const files = e.target.files;
  console.log(Array.from(files)); // 输出：[File, File, File]
  files.forEach(file => console.log(file.name, file.size)); // 只显示名字，size是0？
}

为什么会拿不到文件大小？是不是需要等待文件读取？或者我的遍历方式有问题？

文件上传

我来解答赞 19 收藏

反馈

1 条解答

令狐淑怡 Lv1

你的代码逻辑其实没问题，问题出在控制台的显示方式上。File对象确实有name、size、type这些属性，但你在console.log里直接打印file对象时，浏览器控制台为了性能默认是懒加载的——就是说它只显示[object File]，点开才会展开详细信息。你看到size是0或者拿不到数据，可能是点了展开后才看到内容，导致误以为属性不存在。

正确的做法是直接访问file的属性，比如file.name和file.size，这些值是立马可用的，不需要读取文件内容。你原来的forEach写法是对的，但建议改成这样验证一下：

const handleFiles = (e) => {

  const fileArray = Array.from(e.target.files);

  fileArray.forEach(file => {

    console.log('文件名:', file.name, '大小:', file.size, '类型:', file.type);

  });

}

你会发现size和type都能正常输出。如果你要同时提取文件名数组和文件对象数组，我的做法是直接map出来：

const fileNames = fileArray.map(file => file.name);

const fileObjects = fileArray; // 本来就是File对象数组

总结：不是拿不到，是控制台显示的问题。只要直接访问file.name、file.size、file.type就能拿到对应值，完全不需要额外读取或等待。

2026-02-12 00:58