Skip to content

简介

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>