# @cruisecritic/react-dropzone-uploader 中文文档 规范地址：https://npmcn.com/package/%40cruisecritic/react-dropzone-uploader/ 版本：2\.12\.6 npm 元数据更新时间：2022-06-14T15:29:53.107Z 中文译文更新时间：2026-11-11T02:04:10.915Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40cruisecritic/react-dropzone-uploader 原文对照：https://npmcn.com/package/%40cruisecritic/react-dropzone-uploader/?lang=original 项目主页：https://github.com/CruiseCritic/react-dropzone-uploader#readme 源码仓库：https://github.com/CruiseCritic/react-dropzone-uploader ## 关键信息（来自 npm 元数据） - 包体积（解压后）：117 kB，27 个文件 - 模块格式：CommonJS - TypeScript 类型：包内自带 - 运行依赖：1 个 - peer 依赖：prop-types \>=15\.5\.10，react \>=16\.2\.0，react-dom \>=16\.2\.0 - 首次发布：2022-06-10T19:41:01.938Z - 最新版本发布：2022-06-14T15:26:38.438Z - 近 30 天下载量：2933（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：6（近 12 个月 0 个） ## 中文简介 反应文件滴放区和上传器:完全自定义,进度指示器,上传取消并重新启动,零解密和优秀的TypeScript支持 ## 安装 ```sh npm install @cruisecritic/react-dropzone-uploader ``` 也可以使用：`pnpm add @cruisecritic/react-dropzone-uploader`、`yarn add @cruisecritic/react-dropzone-uploader`、`bun add @cruisecritic/react-dropzone-uploader` ## README # 反应 Droppzone 上传程序 [![NPM](https://img.shields.io/npm/v/react-dropzone-uploader.svg)](https://www.npmjs.com/package/react-dropzone-uploader) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/react-dropzone-uploader.svg)](https://www.npmjs.com/package/react-dropzone-uploader) React Droppzone上传器是一个自定义文件上传器,用于React. _说明: 这是从 [福塔纳-co/反应-投放区加载器](https://github.com/fortana-co/react-dropzone-uploader) 并修改为导出.d.ts文件 而不是在 .tsx 文件上复制用于打字支持 ._ ## 特征 - 详细文件元数据和预览,特别是图像、视频和音频文件 - 上传状态和进度,上传取消并重新启动 - 容易设置认证信头和额外的上传字段( Q)[参见 S3 示例](https://react-dropzone-uploader.js.org/docs/s3)(中文(简体) ) - 使用 CSS 或 JS 自定义样式 - 用组件注射道具全面控制渲染 - 控制上传生命周期 - 模块设计; 用作独立的空投区、 文件输入或文件上传器 - 跨浏览器支持,移动友好,包括从相机直接上传 - 轻而易举 - 优秀类型脚本定义 ![](https://raw.githubusercontent.com/fortana-co/react-dropzone-uploader/master/rdu.gif) ## 文档 [https://react-dropzone-uploader.js.org 互联网档案馆的存檔,存档日期2013-12-22](https://react-dropzone-uploader.js.org/) ## 安装 `npm install --save react-dropzone-uploader` 在您的应用程序中导入默认样式 . ```js import 'react-dropzone-uploader/dist/styles.css' ``` ## 快速启动 RDU处理常见的用例,几乎没有配置. 以下的代码会给你一个可被点击的文件输入,可以接受图像,音频和视频文件. 它上传文件到 `https://httpbin.org/post`,并制作一个按钮以提交已完成上传的文件. [看看现场演示](https://react-dropzone-uploader.js.org/docs/quick-start)。 。 。 . ```js import 'react-dropzone-uploader/dist/styles.css' import Dropzone from 'react-dropzone-uploader' const MyUploader = () => { // specify upload params and url for your files const getUploadParams = ({ meta }) => { return { url: 'https://httpbin.org/post' } } // called every time a file's `status` changes const handleChangeStatus = ({ meta, file }, status) => { console.log(status, meta, file) } // receives array of files that are done uploading when submit button is clicked const handleSubmit = (files) => { console.log(files.map(f => f.meta)) } return ( ) } ``` ## 实例 参见更多现场实例: [https://react-dropzone-uploader.js.org/docs/examples 页面存档备份,存于互联网档案馆](https://react-dropzone-uploader.js.org/docs/examples)。 。 。 . ## 道具 检查出来 [rDU道具的完整表格](https://react-dropzone-uploader.js.org/docs/props)。 。 。 . ## 浏览器支持 | 颜色 | 火花 | 边缘 | 萨法里 | 独立 | iOS 萨法里 | 安卓的颜色 | | --- | --- | --- | --- | --- | --- | --- | | ✔ | ✔ | ✔ | 10+, 9\* 时间 | 第11条\* | ✔ | ✔ | \* 要求 `Promise` 多填充,例如:. [@ babel/ 填充](https://babeljs.io/docs/en/babel-polyfill) ## UMD 构建 该库作为ES模块可供使用 [https://unpkg.com/react-dropzone-uploader@VERSION/dist/react-dropzone-uploader.umd.js (中文(简体) )](https://unpkg.com/react-dropzone-uploader@VERSION/dist/react-dropzone-uploader.umd.js)。 。 。 . 如果您想要将其包含在页面中, 您也需要包含依赖和 CSS . ```html ``` ## 捐款 有一些地方可以改进RDU; [看这里](https://github.com/fortana-co/react-dropzone-uploader/labels/help%20wanted)。 。 。 . 例如,RDU具有坚实的核心功能,但具有最小的外观和感觉. 它将更加方便初学者,具有更广泛的内置组件. ### 喊出声 感谢@nchen63的帮助 [类型脚本分解](https://github.com/fortana-co/react-dropzone-uploader/blob/master/src/Dropzone.d.ts)来啊! ### 运行 Dev 克隆工程,安装依赖,运行dev服务器. ```sh git clone git://github.com/fortana-co/react-dropzone-uploader.git cd react-dropzone-uploader yarn npm run dev ``` 此运行代码在 `examples/src/index.js`,它有许多实例可以使用 `Dropzone`。库源代码位于 `/src` 目录. ## 谢谢 感谢 `react-dropzone`, (中文(简体) ), `react-select`,以及 `redux-form` 给灵感. ## 常见问题 ### @cruisecritic/react-dropzone-uploader 是什么？ 反应文件滴放区和上传器:完全自定义,进度指示器,上传取消并重新启动,零解密和优秀的TypeScript支持 ### 如何安装 @cruisecritic/react-dropzone-uploader？ 在项目目录运行 npm install @cruisecritic/react-dropzone-uploader，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：prop-types（\>=15\.5\.10）、react（\>=16\.2\.0）、react-dom（\>=16\.2\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @cruisecritic/react-dropzone-uploader 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @cruisecritic/react-dropzone-uploader 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @cruisecritic/react-dropzone-uploader 可以商用吗？ @cruisecritic/react-dropzone-uploader 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @cruisecritic/react-dropzone-uploader 的下载量有多少？ 根据 npm 官方下载统计，@cruisecritic/react-dropzone-uploader 在 2026/10/11 – 2026/11/09 这 30 天内被下载 2,933 次，日均约 98 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @cruisecritic/react-dropzone-uploader 还在维护吗？ 最新版本 2\.12\.6 发布于 2022/06/14（4 年前）；至今共发布 6 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/06/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。