前端大文件上传：从痛点到实践的全攻略

最新推荐文章于 2025-08-06 14:36:16 发布

coder YU

最新推荐文章于 2025-08-06 14:36:16 发布

阅读量2k

点赞数 75

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_69642284/article/details/148559525

javascript 专栏收录该内容

6 篇文章

订阅专栏

在数字化时代，文件上传功能早已成为网页和应用的标配。无论是分享高清视频、大型工程文件，还是备份重要数据，用户对上传大文件的需求日益增长。然而，当文件体积从几 MB 飙升至几百 MB 甚至 GB 级别时，前端开发者往往会面临诸多挑战。今天，我们就来深入探讨前端大文件上传的那些事儿，从痛点分析到具体实现，带你解锁高效上传的正确姿势。

一、大文件上传的痛点

网络问题：大文件传输对网络环境要求极高，一旦网络不稳定，上传过程中断，就可能导致整个上传失败，用户需要重新从头开始，体验极差。
性能瓶颈：在传统的一次性上传方式中，大文件会占用大量内存和带宽资源，可能导致浏览器卡顿，甚至崩溃，影响用户设备的正常使用。
服务器压力：一次性接收大文件会给服务器带来巨大压力，可能造成服务器负载过高，影响其他服务的正常运行，甚至导致服务器宕机。
用户体验：长时间的等待上传进度条，容易让用户产生焦虑和不满情绪，降低用户对产品的好感度和使用意愿。

二、解决方案：分片上传

为了解决上述痛点，分片上传成为了前端大文件上传的主流方案。分片上传的核心思想是将大文件分割成多个较小的分片，然后逐片上传到服务器，最后在服务器端将这些分片重新组合成完整的文件。

1. 前端实现步骤

const file = document.getElementById('fileInput').files[0];
const chunkSize = 10 * 1024 * 1024; // 10MB
const chunks = [];

for (let start = 0; start < file.size; start += chunkSize) {
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);
    chunks.push(chunk);
}

const uploadChunk = async (chunk, index) => {
    const formData = new FormData();
    formData.append('chunk', chunk);
    formData.append('chunkIndex', index);
    formData.append('totalChunks', chunks.length);
    const response = await fetch('/upload', {
        method: 'POST',
        body: formData
    });
    return response.json();
};

当所有分片都上传完成后，前端通知服务器进行文件合并。可以发送一个包含文件基本信息（如文件名、总片数等）的请求，告知服务器可以开始合并操作。

2. 服务器端处理

以 Node.js 为例，使用fs模块可以方便地进行文件操作：

const http = require('http');
const fs = require('fs');
const path = require('path');

const server = http.createServer((req, res) => {
    if (req.url === '/upload' && req.method === 'POST') {
        let data = '';
        req.on('data', (chunk) => {
            data += chunk;
        });
        req.on('end', () => {
            const formData = new FormData();
            const { chunk, chunkIndex, totalChunks } = formData.parse(data);
            const filePath = path.join(__dirname, `temp/${chunkIndex}`);
            const writeStream = fs.createWriteStream(filePath);
            writeStream.write(chunk);
            writeStream.end();
            // 检查是否所有分片都已上传，若完成则合并文件
            if (chunkIndex === totalChunks - 1) {
                const outputFilePath = path.join(__dirname, 'uploadedFile');
                const outputStream = fs.createWriteStream(outputFilePath);
                for (let i = 0; i < totalChunks; i++) {
                    const chunkFilePath = path.join(__dirname, `temp/${i}`);
                    const readStream = fs.createReadStream(chunkFilePath);
                    readStream.pipe(outputStream, { end: false });
                    readStream.on('end', () => {
                        fs.unlinkSync(chunkFilePath);
                    });
                }
                outputStream.end();
            }
            res.writeHead(200, { 'Content-Type': 'application/json' });
            res.end(JSON.stringify({ message: 'Chunk uploaded successfully' }));
        });
    } else {
        res.writeHead(404, { 'Content-Type': 'text/plain' });
        res.end('Not Found');
    }
});

server.listen(3000, () => {
    console.log('Server running on port 3000');
});

三、进阶优化

1. 断点续传

断点续传的实现，依赖于前端与服务器之间对上传状态的记录与同步。

前端部分：在开始上传前，前端生成一个唯一的uploadId，用于标识本次上传任务，并将其与文件信息一起发送给服务器。同时，在本地使用localStorage或IndexedDB存储已上传的分片索引。

const uploadId = generateUniqueId(); // 自定义生成唯一ID的函数
const uploadedChunks = JSON.parse(localStorage.getItem(`uploadedChunks_${uploadId}`)) || [];

const startUpload = async () => {
    for (let i = 0; i < chunks.length; i++) {
        if (uploadedChunks.includes(i)) {
            continue;
        }
        try {
            const response = await uploadChunk(chunks[i], i, uploadId);
            if (response.success) {
                uploadedChunks.push(i);
                localStorage.setItem(`uploadedChunks_${uploadId}`, JSON.stringify(uploadedChunks));
            }
        } catch (error) {
            console.error('上传失败', error);
            break;
        }
    }
};

服务器端部分：服务器接收到分片时，根据uploadId和chunkIndex判断该分片是否已上传过。如果已上传，则直接返回成功响应；若未上传，则正常保存分片。当所有分片上传完成后，依据uploadId合并文件。

const uploadedChunksMap = {};

// 处理上传请求
if (req.url === '/upload' && req.method === 'POST') {
    let data = '';
    req.on('data', (chunk) => {
        data += chunk;
    });
    req.on('end', () => {
        const formData = new FormData();
        const { chunk, chunkIndex, totalChunks, uploadId } = formData.parse(data);
        if (!uploadedChunksMap[uploadId]) {
            uploadedChunksMap[uploadId] = new Set();
        }
        if (uploadedChunksMap[uploadId].has(chunkIndex)) {
            res.writeHead(200, { 'Content-Type': 'application/json' });
            res.end(JSON.stringify({ message: 'Chunk already uploaded', success: true }));
            return;
        }
        const filePath = path.join(__dirname, `temp/${uploadId}_${chunkIndex}`);
        const writeStream = fs.createWriteStream(filePath);
        writeStream.write(chunk);
        writeStream.end();
        uploadedChunksMap[uploadId].add(chunkIndex);
        if (uploadedChunksMap[uploadId].size === totalChunks) {
            const outputFilePath = path.join(__dirname, `uploadedFiles/${uploadId}`);
            const outputStream = fs.createWriteStream(outputFilePath);
            for (let i = 0; i < totalChunks; i++) {
                const chunkFilePath = path.join(__dirname, `temp/${uploadId}_${i}`);
                const readStream = fs.createReadStream(chunkFilePath);
                readStream.pipe(outputStream, { end: false });
                readStream.on('end', () => {
                    fs.unlinkSync(chunkFilePath);
                });
            }
            outputStream.end();
        }
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify({ message: 'Chunk uploaded successfully', success: true }));
    });
}