简介
redux-file-upload-header 是一个可以在上传文件时自定义 header 信息的 npm 包。它可以帮助开发者在上传文件时，用更加安全的方式传输文件，并对上传的文件进行更精细的控制。
安装
通过 npm 可以很方便地安装 redux-file-upload-header。
npm install redux-file-upload-header
使用
redux-file-upload-header 可以很方便地在 Redux 应用程序中使用，下面我们一步步来看：
1. 必要设置
首先，在你的 Redux Store 中，你需要导入需要的中间件 createFileUploadMiddleware。
import {createFileUploadMiddleware} from 'redux-file-upload-header';2. 参数配置
然后，你需要对中间件进行参数配置：
-- -------------------- ---- -------
----- -------------------- - ----------------------------
--- -
----------- --------------- ------- -- -
----- --------- ------ --
---------------------------------------- ------- --------------------
-------------------------------------- ------------------
--
-------------- ---------- ------- -- -
-- -------------------------
--
-
---其中，你可以通过 on 中的参数来进行一些自定义的处理，如更改 Header 信息、对响应结果的处理等。
3. 配置 Middleware
接着，你需要将 Middleware 配置到 Redux Store 中：
import { createStore, applyMiddleware } from 'redux';
const store = createStore(
reducer,
applyMiddleware(fileUploadMiddleware),
);至此，redux-file-upload-header 的配置已经完成。
4. 发送请求
在发送请求前，你需要设置你要上传的文件：
-- -------------------- ---- -------
------ ----- ----------- - --------------
------ ----- ---------- - ------ -- -- ----- ------------ ---- ---
------ ------- -------- ------------- - --- ------- -
------ ------------- -
------ ------------
--------- -
---------
----------- -
------- -
----- -------
------- -------
--------- -------------
-------- ---------
--------- -----------------
--
------- -------
----- ------------
--
--
--------
------ ------
-
-然后你可以向你的 API 发送一个带有文件的请求：
dispatch(uploadFile(file));
示例代码
下面是一个完整的示例，演示了如何上传一个文件并附加 header 信息：
-- -------------------- ---- -------
------ ---------------------------- ---- ---------------------------
------ - ------------ --------------- - ---- --------
----- ---- - --- -----------
--------------------- --------------------------------------------
----- -------------------- - ----------------------------
--- -
----------- --------------- ------- -- -
---------------------------------------- ------- --------------------
-------------------------------------- ------------------
--
-------------- ---------- ------- -- -
-- ------
--
-
---
----- ----- - ------------
--------
--------------------------------------
--
------ ----- ----------- - --------------
------ ----- ---------- - ------ -- -- ----- ------------ ---- ---
------ ------- -------- ------------- - --- ------- -
------ ------------- -
------ ------------
--------- -
---------
----------- -
------- -
----- -------
------- -------
--------- -------------
--------- -----------------
--
----- ------------
--
--
--------
------ ------
-
-
---------------------------------结语
redux-file-upload-header 为文件上传提供了更加安全的机制，增强了文件上传的可控制性。我们希望这篇文章对你的学习和工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590d81e8991b448d67b0