介绍
dnd-upload 是一个基于 React 的 npm 包，可以让用户通过拖拽文件来上传文件，同时支持上传前对文件类型和大小的校验。
安装
可以通过 npm 或 yarn 来安装 dnd-upload，示例代码如下：
npm install dnd-upload # 或 yarn add dnd-upload
使用
在需要使用 dnd-upload 的文件中引入该组件：
import DndUpload from 'dnd-upload';
然后在 JSX 代码中使用该组件，示例代码如下：
-- -------------------- ---- -------
----------
--------------------
----------------- -- -
-----------------
--
-------------- -- ------- --
----------------- ------- -- ------------ --
-
--------------------
------------上面的代码中，我们使用了 DndUpload 组件，并传递了一些必要的属性，包括上传文件的地址、上传成功后的回调函数、最大文件大小和支持的文件类型。同时，我们也通过传递子元素作为默认提示信息展示在上传区域内。
API
action: string: 文件上传的地址。onUploaded: Function: 文件上传成功后的回调函数，函数参数是服务器响应的数据。maxSize: number: 允许上传的最大文件大小，单位为 KB。fileType: string[]: 允许上传的文件类型，数组中传递文件类型即可。例如：['jpg', 'png']。
注意事项
action属性的值必须是一个有效的 URL。maxSize属性的默认值为 1024，即 1MB。fileType属性的默认值为文件的 mimeType。- 该组件在 React v16.4 或更高版本下才能正常使用。
示例代码
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------- ---- -------------
----- ---------- - -- -- -
----- ------- --------- - ---------------
----- -------------- - ----- -- -
----- ------ - ------------- -- ---------- - ----- - ---- ------ ---- - -
-----------------
--
------ -
-----
----------
--------------------
----------------- -- --------------------
-------------- -- ------- --
----------------- ------- -- ------------ --
-
--------------------
------------
------ -- ---- ----------- ------------- ------ ---
------
--
--
------ ------- -----------总结
dnd-upload 是一个简单易用的 npm 包，可以让我们通过拖拽文件来上传文件，同时还支持上传前的校验，让我们的上传体验更加友好和便捷。如果你想要实现这样的功能，可以尝试使用该组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5981e8991b448e5db2