【JS】基于原生JavaScript的大文件切片上传及断点续传实现

// 假设有一个input元素用于文件选择，id为"file-input"
document.getElementById('file-input').addEventListener('change', function(e) {
    var file = e.target.files[0]; // 获取文件引用
    if (!file) {
        return;
    }
 
    var chunkSize = 1024 * 1024; // 每个切片的大小，这里以1MB为例
    var start = 0; // 切片开始字节
    var end = chunkSize; // 切片结束字节
 
    var reader = new FileReader();
    reader.onload = function(e) {
        var chunk = e.target.result; // 获取切片内容
        // 这里应该是将切片发送到服务器的逻辑，例如使用AJAX或者Fetch API
        // 发送的时候应该携带文件信息、切片信息、以及用于断点续传的chunkSize、start和end信息
 
        // 更新切片的开始和结束字节
        start = end;
        end = start + chunkSize;
 
        // 如果还有更多切片需要上传，继续读取并上传
        if (start < file.size) {
            readAndSendChunk(file, start, end);
        }
    };
 
    // 递归调用自身，读取并上传下一个切片
    function readAndSendChunk(file, start, end) {
        var chunk = file.slice(start, end); // 创建切片
        reader.readAsArrayBuffer(chunk); // 读取切片内容
    }
 
    // 开始读取并上传第一个切片
    readAndSendChunk(file, start, end);
});

这个简化版的示例展示了如何使用JavaScript的File API来读取用户选择的文件，并将其分割成指定大小的切片。然后，每个切片都可以通过AJAX或Fetch API上传到服务器。服务器端需要实现接收切片并重新组合的逻辑，以及记录上传进度的逻辑。断点续传的关键在于在上传下一个切片之前记录当前的上传状态。