介绍
@reacted/upload 是一个基于 React 的上传组件，易于使用且高度可定制。它拥有多种上传方式和多种上传文件类型，并支持上传前的文件大小和文件类型验证。本文将详细介绍该组件的使用方法和注意事项。
安装
@reacted/upload 是一个 npm 包，可以通过 npm 或 yarn 进行安装：
npm install @reacted/upload # 或 yarn add @reacted/upload
使用
使用 @reacted/upload 非常简单，只需导入组件并将其包含在 render 方法中即可。组件将自动处理上传文件的细节，并将文件信息提交到服务器。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ------------------
----- ----------- ------- --------------- -
----- - -
------ ---
------ -----
-
------------ - ------- -- -
--------------- ----- ---
-
----------- - ------- -- -
--------------- ----- ---
-
-------- -
----- - ------ ----- - - -----------
------ -
--
------ -- ---------------------------
--------------- -- ---- -----------------------------------
-------
----------------------------
--------------------------
--
---
--
-
-API
Upload
上传组件的主要组件类，用于渲染上传界面和处理文件上传。
props
disabled(boolean, optional): 禁用组件，防止用户使用。默认值为false。multi(boolean, optional): 是否允许批量上传文件。默认值为false。accept(string, optional): 限制上传的文件类型。默认值为null，表示允许所有文件类型。多个类型请用逗号分隔，如.pdf,.docx。maxSize(number, optional): 限制上传文件的最大大小（单位：字节）。默认值为null，表示不限制文件大小。className(string, optional): 样式类名。style(object, optional): 内联样式。children(React.Node, optional): 自定义组件的子元素。onChange(function, required): 文件上传成功后的回调函数。函数接收一个参数，该参数是一个包含上传文件信息的数组。onError(function, optional): 文件上传出错时的回调函数。函数接收一个参数，该参数是一个包含错误信息的对象。
示例
上传单个文件
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ------------------
----- ---------------- ------- --------------- -
----- - -
----- -----
------ -----
-
------------ - ------- -- -
-- ------------- --- -- -------
--------------- ----- -------- ---
-
----------- - ------- -- -
--------------- ----- ---
-
-------- -
----- - ----- ----- - - -----------
------ -
--
------ -- ---------------------------
----- -- -----------------------
-------
----------------------------
--------------------------
--
---
--
-
-上传多个文件
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ------------------
----- --------------- ------- --------------- -
----- - -
------ ---
------ -----
-
------------ - ------- -- -
--------------- ----- ---
-
----------- - ------- -- -
--------------- ----- ---
-
-------- -
----- - ------ ----- - - -----------
------ -
--
------ -- ---------------------------
--------------- -- ---- -----------------------------------
-------
-----
----------------------------
--------------------------
--
---
--
-
-限制文件类型和文件大小
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ------------------
----- --------------------- ------- --------------- -
----- - -
----- -----
------ -----
-
------------ - ------- -- -
-- ------------- --- -- -------
----- ---- - ---------
----- - ----- ---- - - -----
-- ---------------------- -
--------------- ------ --- ---------------- ---
-------
-
-- ----- - ---- - ----- -
--------------- ------ --- ----------------- ---
-------
-
--------------- ---- ---
-
----------- - ------- -- -
--------------- ----- ---
-
-------- -
----- - ----- ----- - - -----------
------ -
--
------ -- ---------------------------
----- -- -----------------------
-------
-----------------------
------------- - -----
----------------------------
--------------------------
--
---
--
-
-结语
以上是 @reacted/upload 的使用教程，希望能对你有所帮助。同时，如果你在使用过程中遇到问题，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac11b5cbfe1ea0610925