简介
fup 是一个用于前端文件上传的 npm 包。它支持断点续传、进度条显示、文件类型校验等功能，使用简单且功能齐全，非常适合开发和生产环境中使用。
安装
使用 npm 进行安装：npm install fup
使用
初始化
首先需要初始化 fup，将其实例化并传入上传参数：
const fup = new Fup({
url: "/upload",
progressBar: {
element: document.getElementById("progress-bar")
}
});其中 url 参数是后台接受文件上传的接口地址，progressBar 参数是用于显示上传进度的进度条元素。
上传
使用 fup.upload() 方法进行文件上传：
const input = document.querySelector("input[type='file']");
input.onchange = () => {
const file = input.files[0];
fup.upload(file);
};使用 onchange 事件获取选中的文件，然后传递给 fup.upload() 方法。
上传事件监听
fup 支持多种事件监听，可以根据自己的需要进行使用：
-- -------------------- ---- ------- ------------------ -------- -- - ---------------------- --- ----------------- -------- -- - ---------------------- --- --------------- ----- -- - ------------------- --- --------------- -- -- - ----------------------- ---
配置项
以下为 fup 支持的配置项：
url
上传文件的接口地址。
const fup = new Fup({
url: "/upload"
});timeout
上传超时时间，默认为 0，单位为毫秒，表示不超时。
const fup = new Fup({
timeout: 5000
});withCredentials
开启跨域时带上认证信息，默认为 false。
const fup = new Fup({
withCredentials: true
});customHeaders
自定义请求头信息。
const fup = new Fup({
customHeaders: {
"Authorization": "Bearer token"
}
});fields
上传额外的表单数据。
const fup = new Fup({
fields: {
"username": "john",
"password": "123456"
}
});progressBar
设置上传进度条，详见下方。
blockParallel
设置断点续传时每个块并行上传的数量，默认为 3。
const fup = new Fup({
blockParallel: 2
});blockSize
设置断点续传时每个块的大小，默认为 2MB。
const fup = new Fup({
blockSize: 1024 * 1024 // 1MB
});retry
上传失败时的重试次数，默认为 2。
const fup = new Fup({
retry: 3
});validate
文件校验函数，可自定义文件上传前的校验逻辑，详见下方。
进度条
fup 支持进度条显示，可以使用以下方式进行配置：
-- -------------------- ---- -------
----- --- - --- -----
------------ -
-------- ----------------------------------------
-------------- -----------
----------- --------
-------------- -----------
-------------- -------------
------------ ------------
----------- ------- -----------
----------- --------- ------ ----- -- -
------------------------ -------- ------ ------
--
----------- -- -- -
------------------- -----------
--
-------- -- -- -
------------------- --------
-
-
---其中 element 为进度条的 DOM 元素，completeClass 表示上传完成状态时的 CSS 类名，errorClass 表示上传出错状态时的 CSS 类名，progressClass 表示上传中状态时的 CSS 类名，percentFormat、speedFormat、timeFormat 分别为显示进度百分比、上传速度、剩余时间的格式化字符串，其中 {percent}、{speed}、{time} 为占位符，onProgress、onComplete、onError 分别为进度条更新时、上传完成时、上传出错时的自定义事件回调。
文件校验
fup 支持自定义文件上传前的校验逻辑，使用 validate 配置项进行设置：
-- -------------------- ---- -------
----- -------- - ---- -- -
-- ---------- - - - ---- - ----- -
------ ----- ---- --------------
-
-- ------------------------------------- -
------ ----- ---- ----- --- ------ -----------
-
------ -----
--
----- --- - --- -----
--------- --------
---其中 validate 函数接受一个文件对象作为参数，返回 true 表示校验通过，返回字符串则表示校验失败，此时可以通过 onError 事件中的 error 参数获取校验失败的信息。
总结
fup 是一个功能齐全、使用简单的 npm 包，适合用于前端文件上传的开发和生产环境中。使用 fup 可以轻松实现断点续传、进度条显示、文件类型校验等功能，大大提高了文件上传的体验和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005576c81e8991b448d4697