简介
enlarge-file-upload 是一个基于 原生 js 封装的文件上传方法,专门用来处理大文件上传。提供了系列函数用来支持暂停、继续等功能,内置了错误重传策略,支持断点续传、重传、重试、并发上传等功能(此库上传基于 axios 库,如果项目不支持 axios,勿用...)
线上演示地址:http://jiang-12-13.com:8988/ 仅用于本库大文件上传案例在线演示,严禁上传违法内容和做其它用处。请善待服务器
QQ 讨论群:324710217
安装
npm 下载
md
npm install enlarge-file-upload
在线 cdn 引入
md
<script src="https://unpkg.com/enlarge-file-upload@latest/dist/upload.js"></script>
快速上手
html
// 引入
<script src="https://unpkg.com/enlarge-file-upload@latest/dist/upload.js"></script>
// 或者 import { createUploader } from 'enlarge-file-upload'
<!-- 引入 Axios 库,用于发送 HTTP 请求 -->
<script src="https://cdn.jsdelivr.net/npm/axios"></script>
<script>
// 配置上传函数
async function uploadFunction({ chunk, index, hash, cancelToken }) {
const formData = new FormData();
formData.append("chunk", chunk);
formData.append("hash", hash);
formData.append("index", index);
await axios.post("http://xxxx/api/upload", formData, {
cancelToken,
});
}
// 配置上传函数
const config = { uploadFunction };
const { upload, pause, resume, state } = createUploader(config);
// 上传文件
fileInput.addEventListener("change", () => {
const file = fileInput.files[0];
upload(file);
});
// 暂停上传
document.getElementById("pauseButton").addEventListener("click", () => {
pause();
});
// 继续上传
document.getElementById("resumeButton").addEventListener("click", () => {
resume();
});
</script>