当前位置：首页 > news >正文

JS—大文件上传

news 来源：原创 2025/4/20 8:38:42

个人博客：haichenyi.com。感谢关注

一. 目录

一–目录
二–分片上传
三–生成文件唯一标识（文件哈希）
四–断点续传 & 秒传
五–分片上传（并发控制）
六–服务端合并分片
七–优化
八–总结

大文件上传的核心痛点是：文件过大，用户网络环境不稳定，服务器压力过大，容易中断，用户体验极差。只要解决这几个问题就行了。其实，最重要的一个问题就是文件过大。文件太大了，我们就分成几份上传就行了。这就是分片。

大文件上传的核心流程
1. 前端分片 → 2. 计算文件唯一标识 → 3. 上传分片 → 4. 服务端合并分片 → 5. 完整性校验

二. 分片上传

将大文件分割成多个固定的小文件，减少单次请求的压力。举个栗子：100M的文件，分成10份，每个10M，这样就可以解决问题。核心代码如下

//主要就是File.slice
function createFileChunks(file, chunkSize = 10 * 1024 * 1024) {
    //分片数组
    const chunks = []
    //文件总大小
    const fileSize = file.size
    let start = 0
    while (start < fileSize) {
        //单个分片
        let chunk = {
            //文件数据
            chunk: file.slice(start, start + fileSize),
            //索引，用于文件合并时的顺序
            index: chunks.length
        }
        chunks.push(chunk)
        start += chunkSize
    }
    return chunks
}

三. 生成文件唯一标识（文件哈希）

使用文件内容生成唯一标识，用于标识文件，实现秒传和断点续传。代码如下

function calculateFileHash(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        const spark = new SparkMD5.ArrayBuffer();
        reader.readAsArrayBuffer(file);
        reader.onload = (e) => {
            spark.append(e.target.result);
            const hash = spark.end();
            resolve(hash);
        };
    })
}

四. 断点续传 & 秒传

秒传： 在上传之前，检查服务端是否存在已经有相同哈希值的文件，有则跳过，没有，则上传
断点续传： 上传前，检查已经上传的分片列表，跳过已上传的分片

五. 分片上传（并发控制）

使用Promise池控制并发数（如同时上传3个分片），避免浏览器阻塞。

async function uploadChunks(chunks, fileHash, concurrency = 3) {
  const pool = new Set(); // 并发池
  for (const { chunk, index } of chunks) {
    const formData = new FormData();
    formData.append('chunk', chunk);
    formData.append('hash', fileHash);
    formData.append('index', index);

    const task = fetch('/api/upload-chunk', {
      method: 'POST',
      body: formData,
    }).then(() => {
      pool.delete(task);
    });

    pool.add(task);
    if (pool.size >= concurrency) {
      await Promise.race(pool); // 等待任意任务完成
    }
  }
  await Promise.all(pool); // 等待剩余任务完成
}