React中如何通过useRef获取文件对象而非文件路径？

开发者阿泽

2026-8-23

解决React中通过useRef获取文件输入框实际File对象的问题

你当前的问题在于，type="file"的输入框，value属性返回的是浏览器出于安全机制生成的虚拟路径，而非实际的文件对象。要获取真实的File对象，需要访问输入框的files属性。

修改步骤：

替换文件获取逻辑：将const enteredClassImage = classImageRef.current.value改为const enteredClassImage = classImageRef.current.files[0]（files是一个FileList数组，单个文件选择时取索引0）
增加空值判断：避免用户未选择文件时出现报错

修改后的完整代码：

export default function Form(props) {
  const classNameRef = useRef()
  const classImageRef = useRef()

  const handleSubmit = (e) => {
    e.preventDefault()

    const enteredClassName = classNameRef.current.value
    // 获取选中的第一个文件对象，可选链操作避免未选文件时报错
    const enteredClassImage = classImageRef.current.files?.[0]

    // 可选：校验文件是否已选择
    if (!enteredClassImage) {
      alert('请选择图片文件')
      return
    }

    const enteredFormData = {
      title: enteredClassName,
      image: enteredClassImage
    }

    props.onAdd(enteredFormData)
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Class Name</label>
          <input
            type="text"
            placeholder="Class Name"
            name="title"
            ref={classNameRef}
          />
        </div>
        <div>
          <label>Image</label>
          <input
            type="file"
            accept="image/*"
            placeholder="Image"
            name="classImageURL"
            ref={classImageRef}
          />
        </div>
        <div>
          <button>Cancel</button>
          <button type="submit">Add</button>
        </div>
      </form>
    </div>
  );
}