简介
react-sequential-file-sender 是一款基于 React 的文件分片上传组件，可用于大文件的分片上传以及断点续传等功能，是一款非常实用的前端工具。
安装
通过 npm 安装 react-sequential-file-sender：
npm install react-sequential-file-sender --save
示例
以下是一个简单的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---------- ---- -------------------------------
----- --- ------- --------- -
-------- -
------ -
---- ----------------
-----------
----------------------------------
--------------- - -----
---------------- - -- - ---
-------------------- -- ----------------------
--------------------- -- ----------------------
----------------- -- ------------------------
--
------
--
-
-
------ ------- ----使用说明
props
| Name | Type | DefaultValue | Description |
|---|---|---|---|
| url | String | null | 上传接口地址，必选参数。 |
| chunkSize | Number | 1024 * 1024 | 指定每个文件分片的大小，默认值为 1MB。 |
| expiration | Number | 1000 * 60 * 10 | 上传 Token 过期时间，默认值为 10 分钟。 |
| onProgress | Function | null | 上传进度回调函数，参数为当前进度（0~100）。 |
| onCompleted | Function | null | 上传完成后回调函数，参数为服务端返回值。 |
| onError | Function | null | 上传失败后回调函数，参数为服务端返回值。 |
使用方法
调用 FileSender 组件，并传入相应的 props 即可使用，示例如下：
<FileSender
url="http://localhost:3000/upload"
chunkSize={1024 * 1024}
expiration={1000 * 60 * 10}
onProgress={progress => console.log(progress)}
onCompleted={response => console.log(response)}
onError={response => console.error(response)}
/>其中，url 是必选参数，其他参数根据需要设置即可。
注意事项
- 上传接口必须支持文件分片上传，否则无法使用本组件；
- 如果要使用断点续传功能，则需在服务端保存上传进度；
- 根据需要，可以在样式中自定义上传按钮等样式；
- 建议在使用前进行相关学习并测试。
结尾
通过本文的介绍，相信大家已经能够了解如何使用 npm 包 react-sequential-file-sender 进行文件分片上传和断点续传等功能。希望本文能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555c881e8991b448d2df1