React文件上传问题：选择文件后event.target.files无文件信息

嘿，我之前也碰到过这个困惑！你说把event对象转成JSON后看不到文件信息，其实这是正常现象——FileList和File对象是浏览器提供的特殊对象，无法直接被JSON序列化，但文件数据其实一直都在event.target.files里，只是你用JSON.stringify()看不到而已。

为什么JSON里看不到文件信息？ #

event.target.files返回的是FileList类型，里面的每个元素都是File实例。这些对象包含很多不可枚举的属性（比如文件的二进制数据），而JSON.stringify()只会序列化对象的可枚举属性，所以转成JSON后就看不到关键的文件信息了，但实际数据并没有丢失。

正确获取文件信息的方式 #

别直接JSON化event，直接访问event.target.files就能拿到文件数据：

handleChange(e) {
  const fileList = e.target.files;
  // 先检查是否有选中文件
  if (fileList.length === 0) return;

  // 获取第一个文件（如果允许多选的话可以遍历fileList）
  const selectedFile = fileList[0];
  
  // 打印文件的基础信息
  console.log('文件名:', selectedFile.name);
  console.log('文件大小:', selectedFile.size + ' bytes');
  console.log('文件类型:', selectedFile.type);
  console.log('最后修改时间:', new Date(selectedFile.lastModified));

  // 这里可以做后续操作，比如上传到服务器、生成图片预览等
}

如果确实需要把文件信息转成可序列化的JSON对象，你可以手动提取需要的属性：

handleChange(e) {
  const fileList = e.target.files;
  const serializableFiles = Array.from(fileList).map(file => ({
    name: file.name,
    size: file.size,
    type: file.type,
    lastModified: file.lastModified
  }));
  
  console.log(JSON.stringify(serializableFiles));
  // 现在就能看到完整的文件信息JSON了
}

React中额外注意点 #

如果需要在异步操作中访问文件信息，记得调用e.persist()来保留React合成事件的引用（否则React会在事件回调结束后回收合成事件）：

handleChange(e) {
  e.persist(); // 保留事件引用
  setTimeout(() => {
    const file = e.target.files[0];
    console.log('异步访问文件:', file);
  }, 1000);
}

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