0Pricing
React Academy · 课时

文件输入与读取文件数据

处理 ，读取文件元数据，并使用 FileReader 预览图片。

文件输入与读取文件数据 是 CoddyKit 上的免费 React Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

在本课中，您将处理 React 中的文件输入框，读取文件元数据，预览选定的图像，并使用 FileReader API 处理文件内容。

文件输入元素

`` 元素无法通过 React 的值属性进行控制，它始终是非受控的。请在 onChange 处理函数中从 `e.target.files[0]` 读取选定的文件。
function FileInput() {
  const handleChange = (e) => {
    const file = e.target.files[0];
    console.log(file.name, file.size, file.type);
  };
  return <input type="file" onChange={handleChange} />;
}

文件对象属性

File 对象扩展了 Blob，并具有以下属性：`name`（文件名）、`size`（字节数）、`type`（MIME 类型，例如 'image/png'）和 `lastModified`（时间戳）。请在上传或处理之前读取这些属性。

接受特定文件类型

使用 `accept` 属性提示浏览器应显示哪些文件类型。请组合使用 MIME 类型和扩展名，同时始终在服务器端进行验证。
<input type="file" accept="image/png,image/jpeg,.pdf" />

选择多个文件

添加 `multiple` 属性以允许选择多个文件。`e.target.files` 会返回一个 FileList；请使用 `Array.from()` 将其转换为数组，以便使用数组方法。
<input type="file" multiple />

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

使用 URL.createObjectURL 预览图像

使用 `URL.createObjectURL(file)` 为选定的图像文件创建临时预览 URL。使用完毕后，请记得通过 `URL.revokeObjectURL` 撤销该 URL，以释放内存。
const [preview, setPreview] = useState(null);

const handleChange = (e) => {
  const file = e.target.files[0];
  if (file) setPreview(URL.createObjectURL(file));
};

useEffect(() => {
  return () => { if (preview) URL.revokeObjectURL(preview); };
}, [preview]);

{preview && <img src={preview} alt="Preview" />}

使用 FileReader 读取文件内容

使用 `FileReader` API 将文件内容读取为文本或数据 URL。对于文本文件，请调用 `reader.readAsText(file)`；对于图像等二进制文件，请调用 `reader.readAsDataURL(file)`。
const reader = new FileReader();
reader.onload = (e) => setContent(e.target.result);
reader.readAsText(file);

文件大小验证

请在上传前在客户端验证文件大小。拒绝超过阈值的文件，并显示错误消息。
const MAX_SIZE = 5 * 1024 * 1024; // 5 MB
if (file.size > MAX_SIZE) {
  setError('File must be under 5 MB');
  return;
}

清除文件输入框

无法通过设置文件输入框的值来清除它，因为该值是只读的。请改用引用以命令式方式重置它，或者修改输入框的 `key` 属性以强制重新挂载。
const inputRef = useRef();
const clear = () => { inputRef.current.value = ''; };
<input ref={inputRef} type="file" />

在状态中存储文件引用

请将 File 对象本身存储在状态中，而不仅仅是存储文件名或 URL。这样，您稍后就可以上传文件，而无需再次从 DOM 中读取它。
const [file, setFile] = useState(null);
const handleChange = (e) => setFile(e.target.files[0] || null);

快速检查

在浏览器中预览选定的图像文件时，哪个方法可以创建临时 URL？

回顾

从 e.target.files 读取选定的文件。使用 URL.createObjectURL 进行预览，使用 FileReader 读取内容，在客户端验证大小，并将 File 对象存储在状态中以便稍后上传。

接下来

下一课：**拖放文件上传界面**——您将使用 React 事件构建带有视觉反馈的拖放区域。

常见问题解答

「文件输入与读取文件数据」课时是免费的吗？

是的 — 「文件输入与读取文件数据」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「文件输入与读取文件数据」这节课中我会学到什么？

处理 ，读取文件元数据，并使用 FileReader 预览图片。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「文件输入与读取文件数据」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 使用 useRef 管理非受控输入
  2. 文件输入与读取文件数据
  3. 拖放文件上传界面
  4. 向后端 API 上传文件
← 返回 React Academy