js 断点续传

// 断点续传的核心思想是通过记录文件上传的进度，当网络中断或其他原因导致上传中断后，可以从上次中断的地方继续上传。

// 以下是使用 XMLHttpRequest 实现断点续传的示例代码：

function uploadFile(file, chunkSize = 1024 * 1024) {
    let xhr = new XMLHttpRequest();
    let offset = 0; // 记录已上传的字节数

    function uploadChunk() {
        if (offset >= file.size) {
            console.log('Upload completed');
            return;
        }

        let blob = file.slice(offset, offset + chunkSize);
        let formData = new FormData();
        formData.append('file', blob);
        formData.append('offset', offset);

        xhr.open('POST', '/upload', true);
        xhr.upload.onprogress = function(event) {
            if (event.lengthComputable) {
                console.log(`Uploaded ${event.loaded} of ${event.total}`);
            }
        };

        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                offset += chunkSize;
                uploadChunk(); // 递归调用继续上传下一个分片
            }
        };

        xhr.send(formData);
    }

    uploadChunk();
}

// 使用示例：
let fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', function(e) {
    let file = e.target.files[0];
    if (file) {
        uploadFile(file);
    }
});

解释说明：

1. chunkSize: 定义每次上传的数据块大小，默认为 1MB。
2. offset: 记录已上传的字节数，用于断点续传。
3. uploadChunk: 递归函数，负责上传每个数据块。每次上传完成后更新 offset 并继续上传下一个分片。
4. FormData: 用于封装要上传的文件和当前偏移量。
5. onreadystatechange: 监听请求状态变化，确保每次上传成功后再上传下一个分片。
6. onprogress: 监听上传进度，实时显示上传进度。

此代码展示了如何实现一个简单的断点续传功能，适用于小文件上传场景。对于大文件或更复杂的场景，建议使用更成熟的库如 resumable.js 或 tus.js。