npm 包 redux-file-upload 使用教程

阅读时长 10 分钟读完

简介

redux-file-upload 是一个基于 Redux 的文件上传库,支持大文件上传、进度监听、失败重试、取消上传等功能。它简化了文件上传的流程,使开发人员可以更容易地集成文件上传功能到自己的应用中。

安装

在项目中使用 npm 或 yarn 安装 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

纠错
反馈