2026西湖龙井茶官网DTC发售：茶农直供，政府溯源防伪到农户家 

React 文件处理：上传、拖放区域与对象 URL

每个非简单的应用程序最终都需要处理文件。个人资料编辑器需要头像上传功能，笔记应用需要附加图片，CSV 导入工具需要一个拖放区域，而图片画廊则需要在客户端生成缩略图。然而，这些功能往往每次都从零开始重新构建，因为 React 中的文件处理涉及三种不同的浏览器 API（<input type="file">、拖放 API 和 URL.createObjectURL），再加上 React 自身的 ref 和 effect 机制——大多数开发者每次都会重新将它们组合起来。

本文将逐步介绍每个 React 应用最终都需要的四种文件处理基础组件：一个无需渲染隐藏 <input> 即可打开文件选择对话框的文件选择器、一个可接收拖拽文件的拖放区域、一个能预览图片且不会造成内存泄漏的对象 URL 辅助工具，以及一个按需加载第三方库的动态脚本加载器。对于每种组件，我们首先手动实现一遍，以便你理解其底层原理，然后再替换为来自 ReactUse 的专用 Hook。最后，我们将这四个组件整合成一个完整的图片上传小部件，它能够选择、拖放、预览图片，并通过按需加载的图片处理库对图片进行处理。

1. 无需隐藏输入框的文件选择

手动实现方式

React 中传统的文件选择器模式看似简单，实则暗藏多个陷阱：

import { useRef, useState } from "react";

function ManualFilePicker() {
  const inputRef = useRef<HTMLInputElement>(null);
  const [files, setFiles] = useState<FileList | null>(null);

  return (
    <div>
      <input
        ref={inputRef}
        type="file"
        multiple
        accept="image/*"
        style={{ display: "none" }}
        onChange={(