简介
enceladus-resumable 是一款基于 Resumable.js 的上传组件，它支持前后端分离的项目部署，并提供了丰富的配置选项，支持断点续传、进度条显示等功能。本文将详细介绍这个 npm 包的使用方法。
安装
在项目目录中运行以下命令：
npm install enceladus-resumable --save
使用
前端
在需要使用上传功能的页面中引入 Resumable.js 和 enceladus-resumable：
<script src="https://cdnjs.cloudflare.com/ajax/libs/resumable.js/1.1.0/resumable.min.js"></script> <script src="./node_modules/enceladus-resumable/index.js"></script>
初始化并配置上传组件：
-- -------------------- ---- ------- ----- -------- - --- -------------------- ------- ------------------------------- ------ - --- ----- -- ------------ -- - ---- - ----- -- ------- -- -- -------------------- -- -- --------- -------- - --------------- ----------------- -- ----------- ----- -- - ------------------- ----- -- ----------- ---------- -- - ------------------- ---------- -- -------- ------- -- - --------------------- ------- -- ---说明：
target：上传目标地址。query：上传时附带的参数。maxFileSize：限制上传文件的最大大小。simultaneousUploads：同时上传的文件数量。headers：上传时附带的 HTTP Header。onComplete、onProgress、onError：上传完成、上传进度、上传出错时的回调函数。
监听文件选择事件，添加文件到上传队列：
const fileInput = document.querySelector('#fileInput'); fileInput.addEventListener('change', (event) => { const files = event.target.files; for (const file of files) { uploader.addFile(file); } });启动上传：
document.querySelector('#btnUpload').addEventListener('click', () => { uploader.start(); });
后端
enceladus-resumable 只负责前端上传相关的逻辑，具体的上传操作需要在后端实现。在使用 enceladus-resumable 前，你需要确保后端能够支持多段上传，并且支持断点续传。
以下是一个 Node.js + Express 的上传接口示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------
----- ---------- - ------------------------------
----------------
---------------------------- --------- ---- ----
------------------------
----------------------
-- ----------
------------- ---- ---- ----- -- -
-------------------------
------ --------------------------------
---
-- ------
------------------- ----- ---- ----- -- -
----- -
---------------------
---------------------
-------------------
--------------------
------------------
- - ---------
----- ---- - ---------------
----- -------- - ---------------------------------------------------------
----------------- ----- -- -
-- ----- -
-------------------
------ -----------------------------
-
-- ---------------------- --- ---------------------- -
-- --------------
----- ------ - -------------------------------------------------------
--- ---- - - -- - -- ---------------------- ---- -
----- --------- - --------------------------------------
----- ----- - ---------------------------
--------------------
-------------------------
-
-------------
-
-----------------------------
---
---
---------------- -- -- -
------------------- ------- -- ------------------------
---注意事项
- 上传的文件名需要保持唯一，否则可能会出现文件名冲突的问题。
- 确保后端实现了多段上传和断点续传相关的逻辑。
- 上传过程中使用的 CSRF Token 需要正确设置，以免出现 CSRF 攻击的问题。
结语
enceladus-resumable 是一款功能强大的上传组件，它支持断点续传、多文件上传、文件限制等功能。本文介绍了 enceladus-resumable 的使用方法，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563a481e8991b448e11a8