简介
redux-file-upload 是一个基于 Redux 的文件上传库，支持大文件上传、进度监听、失败重试、取消上传等功能。它简化了文件上传的流程，使开发人员可以更容易地集成文件上传功能到自己的应用中。
安装
在项目中使用 npm 或 yarn 安装 redux-file-upload。
npm install --save redux-file-upload
yarn add redux-file-upload
使用
redux-file-upload 需要在 Redux Store 中使用，因此我们需要在应用中引入并配置它。以下是一个示例的配置：
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- ------- ------ ----- ---- ------------- ------ - ------- -- ---------- - ---- ------------------- ----- ----------- - ----------------- ---------- -- ----- ----- - ------------------------ -----------------------
在组件中，我们可以使用 redux-file-upload 提供的高阶组件 withFileUpload 来连接 Store 和上传功能。以下是一个上传文件的示例组件：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
------ - -------------- - ---- -------------------
----- ---------- ------- --------------- -
---------------- - ------- -- -
----- ---- - ---------------------
-----------------------
-
-------- -
----- - ------------- -------------- - - ----------
------ -
-----
------ ----------- -------------------------------- --
------------- --- ----------- -- -
-----
-------------
----------------------------------------
------
--
------------- --- --------- -- -------------
------------- --- --------- -- -----------------
------
-
-
-
----- --------------- - ------- -- -
----- ------------- - -----------------------------------
------ -
------------- ---------------------
--------------- ----------------------
-
-
----- ------------------ - ---------- -- -
------ -
------- ------ --
----------
----- --------------------
-------- -
-----
--------- ------------------------------
-
--
-
-
------ ------- --------
----------------
------------------
-----------------------------在以上示例中，我们使用 connect 方法将组件连接到 Store，并使用 withFileUpload 高阶组件来包装上传功能。在上传组件中，我们向 Store 派发一个 fileUpload/upload 的 action，并提供待上传的文件和上传接口的地址。
参数配置
redux-file-upload 支持多个参数配置，用来控制上传过程中的行为和表现。
chunkSize：上传文件时的分块大小，默认为 4MB。maxFiles：每次上传最多允许的文件数量，默认为 1。maxRetries：上传失败后最多的重试次数，默认为 2。retryDelay：重试之前的等待时间，单位为毫秒，默认为 2000ms。metadata：上传文件时一并上传的元数据，可用于区分文件类型、文件所属等分类信息。endpoint：上传接口的地址。method：上传接口的请求方法，默认为 POST。
这些参数可以在上传 action 的 payload 中进行配置。例如，我们可以将上传文件的方式从 POST 改为 PUT，同时将每次上传文件的数量增加到 5，配置如下：
-- -------------------- ---- -------
----------
----- --------------------
-------- -
-----
------- ------
--------- --
--------- ------------------------------
-
--高级用法
除了在组件中简单使用 withFileUpload 来包装上传功能，redux-file-upload 还支持许多高级用法，例如上传前的表单校验、上传后的文件列表展示等等。以下是一些使用示例：
上传前校验
在上传前，我们可以对待上传的文件进行校验，例如判断文件类型是否正确、文件大小是否超出限制、文件名是否合法等。我们可以在上传前自定义一个校验函数，并使用 validate 参数将其注入到上传 action 的 payload 中。以下是一个示例：
-- -------------------- ---- -------
----- -------- - ------- -- -
----- ------- - -- - ---- - ---- -- ----
----- ------------ - -------------- ------------ ------------
--- ---- - - -- - - ------------- ---- -
----- ---- - --------
-- ----------------------------------- -
------ -
------ ----- ------------ -- --- -- ------- ---- ----------------
-
-
-- ---------- - -------- -
------ -
------ ----- ------------ ------- --- ------- ---- ---------- - ---- -
----------
-
-
-
------ - ------- ---- -
-
----------
----- --------------------
-------- -
-----
---------
--------- ------------------------------
-
--在以上示例中，我们自定义了一个校验函数 validate，用来判断文件类型和文件大小是否符合要求。校验函数会返回一个对象，该对象中包含一个 result 字段表示校验结果是否通过，以及一个 error 字段表示校验失败的错误信息。将该函数注入上传 action 的 payload 中后，redux-file-upload 会在上传前调用它进行校验。
上传后展示文件列表
在上传结束后，我们可以将上传成功的文件展示在界面上，供用户查看和管理。redux-file-upload 通过 withReadFile 高阶组件提供了读取文件的能力，我们可以使用它来读取上传成功的文件，并将它们展示在页面上。
以下是一个简单的展示上传成功文件列表的示例：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
------ - --------------- ------------ - ---- -------------------
----- -------- ------- --------------- -
-------------- - ------- -- -
----- - --------- --------------- - - ----------
----- --- - -----------------------------------------------
-------------
-
-------- -
----- - --------------- - - ----------
------ -
----
--------------------------- ------ -- -
--- ------------
--
---------------
------------------------
-----------------------------
------------------
-
--------------- ----------- - --------
----
-----
---
-----
-
-
-
----- --------------- - ------- -- -
----- --------------- - -------------------------------------
------ -
---------------- ---------------------
-
-
----- ------------------ - ---------- -- -
------ -
--------- ----- --
----------
----- -------------------------------
-------- - --- -
--
-
-
------ ------- --------
----------------
------------------
-----------------------------------------在以上示例中，我们使用 withReadFile 高阶组件来包装组件，并且通过 connect 方法连接到 Store 中，以便读取上传成功的文件。在组件中，我们使用 downloadedFiles 展示上传成功的文件，并提供下载链接。同时，我们也通过 readFile action 将已下载的文件读取为 Data URL，并存储到 Store 中供其他组件使用。
结语
redux-file-upload 是一个功能强大的文件上传库，能够帮助开发人员更轻松地实现文件上传功能。该库通过 Redux Store 来统一管理上传的状态和数据，并支持许多高级用法来帮助我们更好地实现文件上传的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cd4
