介绍
@resoptima/react-dropzone 是一个基于 React 的拖拽上传组件。它提供了强大的定制化能力，可以轻松地与你的项目集成。
如何安装
npm install @resoptima/react-dropzone
如何使用
要使用 @resoptima/react-dropzone，需要遵循以下步骤：
- 引入组件
import Dropzone from '@resoptima/react-dropzone';
- 在你的组件中使用
Dropzone组件
-- -------------------- ---- ------- --------- ------------------------- -------------- -- ---------- ---- -- ---------------------- ------------- -- --- ---- - --- -- ---------------------------------- -- ---------- - -- -------------- ----------------------- -----------
- 处理上传文件的函数
const handleOnChange = (acceptedFiles: File[]) => {
console.log(acceptedFiles);
}例子
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ -------- ---- ----------------------------
----- ---- - -- -- -
----- ------- --------- - ---------------------
----- -------------- - --------------- ------- -- -
------------------------
-
------ -
-----
---------
-------------------------
--------------
---------------------- -------------
----------------------------------
-
-----------------------
-----------
----
------ -- ---------------- ----- ------ ------- -- -
--- ----------------------------
---
-----
------
--
-
------ ------- -----在上面的例子中，我们创建了一个简单的上传文件的应用。用户可以将文件拖拽到拖拽框内或者点击 选择文件上传 按钮来选择文件。当用户选择文件后，文件将会被存储在组件 state 中，并在页面上显示文件名。
参数
以下是 @resoptima/react-dropzone 组件的参数：
| 参数名称 | 必选 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| onChange | 是 | (acceptedFiles: File[]) => void |
无 | 当文件上传成功后，将会调用该函数 |
| maxSize | 否 | number |
Infinity |
文件大小的最大限制，单位为 KB |
| accept | 否 | string[] |
[] |
接受的文件格式，例如 ['image/jpeg', 'image/png'] |
| dropzoneText | 否 | string |
'将文件拖拽到此处或点击此处选择文件上传' |
拖拽框内的文本 |
| className | 否 | string |
'' |
组件的 CSS 类名称 |
注意
- 该组件使用了内置的浏览器 API 来进行处理，未使用第三方库。
- 对于低版本的 IE 浏览器（<IE11），不支持该组件。
- 对于 iOS 和 Android 的浏览器，需要将
accept参数设置为['image/*']，否则将无法上传图片。
结论
@resoptima/react-dropzone 组件可以极大地方便你的文件上传需求，具有良好的定制化能力，开箱即用。建议你查看其文档以获取更多信息，或者看实现代码以深入理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005626b81e8991b448dfb52