大文件上传了解多少？

大文件上传是开发中常见的场景，但与普通小文件上传相比，大文件上传需要解决更多的性能、稳定性和安全性问题。以下是大文件上传的核心知识点及解决方案。

---

一、大文件上传的难点

1. 网络限制
   • 由于网络的不稳定性，大文件上传容易中途失败，需要支持断点续传。
2. 服务器性能
   • 直接上传大文件会占用服务器的带宽和资源，影响系统性能。
3. 上传超时
   • HTTP 协议对请求的超时时间有限，大文件上传可能超时。
4. 用户体验
   • 文件上传时间长，用户需要实时反馈上传进度。
5. 存储与安全
   • 需要确保上传的文件存储安全性，防止恶意文件或病毒。

---

二、大文件上传的常见解决方案

1. 分片上传（Chunked Upload）

原理：将大文件分成多个小块（chunk），逐块上传，服务器接收后再合并。

优点：支持断点续传、进度控制、失败重试。

实现步骤：

1. 前端分片：

   • 使用 File 对象和 Blob.slice 方法分割文件。

   • 例如，分片大小设为 5MB：

     const file = document.getElementById('fileInput').files[0];
     const chunkSize = 5 * 1024 * 1024; // 5MB
     const chunks = Math.ceil(file.size / chunkSize);
     
     for (let i = 0; i < chunks; i++) {
         const start = i * chunkSize;
         const end = Math.min(file.size, start + chunkSize);
         const chunk = file.slice(start, end);
         uploadChunk(chunk, i);
     }
     
     

2. 后端接收：

   • 每个分片上传时带上文件唯一标识（如文件名的 hash）和分片序号。

   • 将分片存储后，等待所有分片上传完成。

     const uploadChunk = async (chunk, index) => {
         const formData = new FormData();
         formData.append('chunk', chunk);
         formData.append('index', index);
         await fetch('/upload', { method: 'POST', body: formData });
     };
     
     

3. 合并文件：

   • 后端接收所有分片后，根据序号合并文件。

   • 示例（Node.js）：

     const fs = require('fs');
     const path = require('path');
     
     const mergeChunks = (uploadDir, fileName, chunkCount) => {
         const filePath = path.join(uploadDir, fileName);
         const writeStream = fs.createWriteStream(filePath);
     
         for (let i = 0; i < chunkCount; i++) {
             const chunkPath = path.join(uploadDir, `${fileName}-${i}`);
             const chunk = fs.readFileSync(chunkPath);
             writeStream.write(chunk);
             fs.unlinkSync(chunkPath); // 删除分片
         }
     
         writeStream.end();
     };
     
     

---

2. 断点续传

原理：记录已上传分片的状态，断网或失败后可继续上传未完成的部分。

实现方式：

1. 前端在上传前询问后端哪些分片已经上传。
2. 仅上传未完成的分片，减少重复上传。

关键点：

• 文件唯一标识：通过文件的 hash（如 MD5）生成。
• 状态记录：后端通过数据库或缓存记录每个分片的上传状态。

示例：

• 前端通过 HEAD 请求检查已上传的分片：

  const checkUploadedChunks = async (fileHash) => {
      const response = await fetch(`/check?fileHash=${fileHash}`);
      return response.json(); // 返回已上传的分片列表
  };
  
  const uploadChunks = async (file, fileHash, uploadedChunks) => {
      const chunkSize = 5 * 1024 * 1024;
      const totalChunks = Math.ceil(file.size / chunkSize);
  
      for (let i = 0; i < totalChunks; i++) {
          if (uploadedChunks.includes(i)) continue; // 跳过已上传的分片
  
          const start = i * chunkSize;
          const end = Math.min(file.size, start + chunkSize);
          const chunk = file.slice(start, end);
          await uploadChunk(chunk, i, fileHash);
      }
  };
  
  

---

3. 秒传（Instant Upload）

原理：通过计算文件的唯一标识（如 MD5/SHA256），判断文件是否已存在，若存在则跳过上传。

实现步骤：

1. 前端计算文件的哈希值。
2. 上传前请求后端验证文件是否存在。
3. 若存在，直接返回上传完成状态；否则执行正常上传流程。

实现代码：

async function calculateFileHash(file) {
    const chunkSize = 2 * 1024 * 1024;
    const chunks = Math.ceil(file.size / chunkSize);
    const spark = new SparkMD5.ArrayBuffer();

    for (let i = 0; i < chunks; i++) {
        const start = i * chunkSize;
        const end = Math.min(file.size, start + chunkSize);
        const chunk = await file.slice(start, end).arrayBuffer();
        spark.append(chunk);
    }

    return spark.end(); // 返回文件的 MD5 哈希值
}

async function checkAndUpload(file) {
    const hash = await calculateFileHash(file);
    const response = await fetch(`/check?hash=${hash}`);

    if (response.ok) {
        console.log('File already exists, skipping upload.');
    } else {
        console.log('File does not exist, proceeding with upload.');
        uploadFile(file);
    }
}

---

4. 大文件分发与存储优化

• 存储优化：
  • 使用对象存储（如 AWS S3、阿里云 OSS）来保存上传的文件。
  • 结合 CDN 分发，提升下载速度。
• 直传云存储：
  • 前端直接将文件上传到云存储，避免占用后端带宽。
  • 流程：
    1. 前端向后端请求上传凭证。
    2. 使用凭证上传到云存储。

---

三、进阶优化

1. 进度显示

   • 使用分片上传配合进度回调函数显示上传进度。

   • 示例：

     const uploadChunk = async (chunk, index) => {
         const xhr = new XMLHttpRequest();
         xhr.upload.onprogress = (e) => {
             console.log(`Chunk ${index} progress: ${(e.loaded / e.total) * 100}%`);
         };
         xhr.open('POST', '/upload');
         xhr.send(chunk);
     };
     
     

2. 多线程上传

   • 同时上传多个分片，提高上传速度。

3. 文件校验

   • 上传完成后，前后端通过文件哈希值校验数据完整性。

---

四、总结

大文件上传的核心是通过分片、断点续传、秒传等技术解决上传效率和稳定性问题，同时结合存储和分发优化用户体验。一个完整的解决方案需要前端和后端协同工作，根据业务需求选择合适的策略，实现高效、安全的大文件上传功能。