大文件上传组件集成实战：分片上传与断点续传实现

1. 项目概述：大文件上传组件集成实战

作为一名经历过毕业设计洗礼的开发者，我深刻理解大文件上传功能在JavaWeb项目中的痛点。这次分享的组件集成方案，源于一个真实的毕业设计需求——需要支持10GB以上文件上传、断点续传、文件夹层级保留，并且必须兼容包括IE8在内的全系列浏览器。

这个看似简单的需求背后隐藏着诸多技术挑战：前端需要处理浏览器兼容性问题，后端要应对大文件分片存储和合并，数据库需记录上传进度。更棘手的是，现代前端框架（如Vue/React）的便捷性在这里完全用不上，因为项目要求必须使用原生JS实现。

2. 前端实现方案解析

2.1 文件分片上传核心逻辑

大文件上传的核心在于分片处理。我们采用固定大小的分片策略（通常2-5MB），这样可以平衡网络传输效率和服务器压力。以下是关键代码实现：

javascript复制// 文件分片处理函数
function processFileChunks(file, chunkSize = 2 * 1024 * 1024) {
    const chunks = [];
    let start = 0;
    let end = Math.min(chunkSize, file.size);
    let index = 0;
    
    while (start < file.size) {
        const chunk = file.slice(start, end);
        chunks.push({
            index: index++,
            start,
            end,
            chunk
        });
        start = end;
        end = Math.min(start + chunkSize, file.size);
    }
    return chunks;
}

注意：IE8及以下版本不支持标准的Blob.slice()方法，需要特殊处理。我们通过检测浏览器特性来提供兼容方案：

javascript复制function getFileSliceMethod() {
    if ('File' in window && 'Blob' in window && 'slice' in Blob.prototype) {
        return 'standard';
    } else if ('ActiveXObject' in window) {
        return 'activeX';
    } else {
        return 'flash';
    }
}

2.2 文件夹上传实现方案

文件夹上传需要递归处理目录结构，现代浏览器可以通过webkitRelativePath获取相对路径，但IE需要特殊处理：

javascript复制// 现代浏览器文件夹处理
function handleFolderUpload(event) {
    const files = event.target.files;
    const fileMap = {};
    
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        if (file.webkitRelativePath) {
            const path = file.webkitRelativePath;
            fileMap[path] = file;
        }
    }
    return fileMap;
}

// IE兼容方案（需Flash支持）
function handleFolderUploadIE(input) {
    return new Promise((resolve) => {
        const flashObj = document.getElementById('flashUploader');
        flashObj.selectFolder((files) => {
            resolve(files);
        });
    });
}

2.3 上传进度控制与断点续传

前端需要维护上传状态，包括已上传分片、失败分片等信息：

javascript复制class UploadManager {
    constructor(file, options) {
        this.file = file;
        this.chunkSize = options.chunkSize || 2 * 1024 * 1024;
        this.chunks = [];
        this.uploadedChunks = new Set();
        this.failedChunks = new Map();
    }
    
    async checkProgress() {
        // 从服务端获取已上传分片信息
        const response = await fetch('/upload/progress?fileId=' + this.fileId);
        const data = await response.json();
        data.uploadedChunks.forEach(chunk => {
            this.uploadedChunks.add(chunk.index);
        });
    }
    
    async upload() {
        await this.checkProgres