大文件分片上传，支持断点续传

大文件分片上传

实现大文件分片上传和断点续传的功能，我们需要将大文件分成小片，然后将这些小片分别上传。如果某个小片上传失败，我们可以再次上传这个小片，而不需要从头开始上传整个文件。这就是断点续传的基本原理。

 

现在，假设你已经集成了axios库并使用了antd的Upload组件，你可以参考以下的步骤来实现这个功能：

 

1. 创建一个文件分片函数：首先，我们需要一个函数来分割大文件。这个函数应该接收一个文件和一个分片的大小作为输入，然后返回一个包含所有分片的数组。

function createFileChunk(file, size = 1024 * 1024) {
    const chunks = [];
    let cur = 0;
    while (cur < file.size) {
        chunks.push({ file: file.slice(cur, cur + size) });
        cur += size;
    }
    return chunks;
}

 

2. 上传文件分片：对于每一个文件分片，我们需要创建一个新的FormData对象，然后使用axios发送一个POST请求到服务器。如果上传失败，我们可以在这里处理重试逻辑。

let failedList = [];
async function uploadChunks(chunks, filename) {
    const requestList = chunks.map(async (chunk, index) => {
        try {
            // 向服务器请求是否需要上传这个分片
            const { data: { shouldUpload } } = await axios({
                url: '/check',
                method: 'post',
                data: {
                    filename: filename,
                    index: index
                }
            });

            if (!shouldUpload) return;

            // 上传分片
            const formData = new FormData();
            formData.append('chunk', chunk.file);
            formData.append('filename', filename);
            formData.append('index', index);

            await axios({
                url: '/upload',
                method: 'post',
                data: formData
            });
        } catch (error) {
            // 如果上传失败，将这个分片添加到失败列表中
            failedList.push({chunk, index});
        }
    });
    await axios.all(requestList);
}

　　

3. 合并文件分片：所有分片上传成功后，我们需要向服务器发送一个请求，告知服务器所有分片都已经上传成功，现在可以合并这些分片。

async function mergeRequest(filename) {
    await axios({
        url: '/merge',
        method: 'post',
        data: {
            filename: filename
        }
    });
}

　　

 

4.重试继续上传

async function retryFailedChunks(filename) {
    for (let i = 0; i < failedList.length; i++) {
        const {chunk, index} = failedList[i];
        const formData = new FormData();
        formData.append('chunk', chunk.file);
        formData.append('filename', filename);
        formData.append('index', index);
        
        try {
            await axios({
                url: '/upload',
                method: 'post',
                data: formData
            });
            // 如果上传成功，将这个分片从失败列表中移除
            failedList.splice(i, 1);
            i--;  // 调整索引
        } catch (error) {
            console.log(`Retry failed for chunk ${index}`);
        }
    }
}

　　

 

5. 使用antd的Upload组件：antd的Upload组件有一个名为beforeUpload的属性。你可以利用这个属性来处理文件上传之前的逻辑，比如文件分片。

<Upload beforeUpload={(file) => {
    const chunks = createFileChunk(file);
    uploadChunks(chunks, file.name).then(() => {
        mergeRequest(file.name);
    });
    return false;  // 阻止Upload组件的自动上传行为
}}>
    <Button>
        <UploadOutlined /> Click to Upload
    </Button>
</Upload>

 

 

以上是在前端实现分片上传和断点续传的基本步骤。不过，还需要注意的是，这个方案假设你的服务器能够处理分片上传和合并分片的逻辑。

 

断点续传部分需要依赖后端进行一些处理，例如：

 

• 在后端记录已经上传的文件分片

• 当前端请求上传某个分片时，后端需要检查这个分片是否已经上传过，如果已经上传过，就不需要重新上传