React组件上传文件时event.target.files[0]返回空对象如何解决

问题根因 #

你看到的event.target.files[0]为{}大概率是序列化输出（比如JSON.stringify、React DevTools直接查看、控制台自动序列化打印）导致的假象，File是浏览器内置的特殊对象，无法被直接序列化为普通JSON对象，不代表你没有正确获取到文件。
你可以先通过打印文件对象的原生属性验证是否获取成功：

// 在handleInputChange中加入该行，能正常输出文件名、大小、类型就说明文件已正确获取
console.log(event.target.files[0].name, event.target.files[0].size, event.target.files[0].type)

不同场景的处理方式 #

场景1：需要将文件上传到后端 #

不需要额外转换格式，直接用FormData包裹后发送请求即可，示例代码：

public handleSubmit = async () => {
  const formData = new FormData();
  // 直接使用state中存储的selectedFile即可
  formData.append('myImage', this.state.selectedFile);
  await fetch('/你的上传接口地址', {
    method: 'POST',
    body: formData
  })
}

注意：大部分请求库会自动识别FormData对象并设置正确的multipart/form-data请求头，不需要手动配置

场景2：需要在前端读取文件内容（如文本预览、图片预览） #

使用浏览器内置的FileReader API读取即可，示例代码：

public handleInputChange(event: any) {
  const target = event.target;
  const value = target.value;
  const name = target.name;

  if(name === 'myImage'){
    const file = event.target.files[0];
    this.setState({ selectedFile: file });
    
    // 示例1：读取文本文件内容
    const reader = new FileReader();
    reader.onload = (e) => {
      // e.target.result就是读取到的文件内容
      const textContent = e.target.result as string;
      console.log('文件内容：', textContent)
    };
    reader.readAsText(file);

    // 示例2：读取图片生成base64用于预览
    // const reader = new FileReader();
    // reader.onload = (e) => {
    //   const imgBase64 = e.target.result as string;
    //   this.setState({ previewImgUrl: imgBase64 })
    // };
    // reader.readAsDataURL(file);
  }else{
    this.setState({
      [name]: value,
    });
  }
}

注意事项 #

• 不要使用JSON.stringify序列化File对象来判断是否存在，直接用this.state.selectedFile instanceof File即可验证文件是否正确获取
• 如果需要支持多文件上传，给input标签加上multiple属性，此时event.target.files是包含所有选中文件的数组

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