Vue-cli实现内网大文件分片上传与断点续传方案

1. 内网超大附件上传的挑战与解决方案

在企业级应用开发中，内网环境下的大文件上传是个常见但棘手的问题。我最近接手的一个政务系统项目就遇到了这个需求——用户需要在内网环境中上传包含数千个文件、总大小可能超过50GB的工程文件夹。经过多次技术验证和方案迭代，最终基于vue-cli实现了稳定可靠的解决方案。

传统单文件上传方案在内网环境下会遇到三个致命问题：

1. 网络稳定性：内网虽然带宽充足，但长连接容易受网络设备策略影响
2. 内存压力：浏览器端大文件加载会导致内存溢出
3. 断点续传：上传中断后需要能从中断点恢复

我们的技术选型路线是：

• 前端：vue-cli + element-ui 构建上传组件
• 核心库：使用web-worker处理文件分片
• 传输协议：基于HTTP的chunked transfer encoding
• 后端配合：Spring Boot接收分片并合并

关键提示：内网环境要特别注意ActiveX等插件可能被安全策略禁用，纯JS方案是更安全的选择

2. Vue-cli环境配置与核心依赖

2.1 项目初始化与必要依赖

bash复制vue create large-file-uploader
cd large-file-uploader
npm install -S spark-md5 element-ui axios

关键配置修改vue.config.js：

javascript复制module.exports = {
  configureWebpack: {
    output: {
      chunkFilename: 'js/[name].[hash:8].js'
    }
  },
  devServer: {
    proxy: {
      '/api': {
        target: 'http://内网IP:8080',
        changeOrigin: true,
        ws: true
      }
    }
  }
}

2.2 文件分片处理方案对比

我们选择Web Worker方案，在public目录创建hash.js：

javascript复制self.importScripts('spark-md5.min.js')

self.onmessage = e => {
  const { chunks } = e.data
  const spark = new self.SparkMD5.ArrayBuffer()
  let count = 0
  
  const loadNext = index => {
    const reader = new FileReader()
    reader.readAsArrayBuffer(chunks[index])
    reader.onload = e => {
      spark.append(e.target.result)
      count++
      if (count === chunks.length) {
        self.postMessage(spark.end())
      } else {
        loadNext(count)
      }
    }
  }
  loadNext(0)
}

3. 文件夹上传的核心实现

3.1 目录树解析与队列管理

javascript复制// 获取文件夹内所有文件
const getAllFiles = async (dirHandle) => {
  const files = []
  for await (const entry of dirHandle.values()) {
    if (entry.kind === 'file') {
      files.push(await entry.getFile())
    } else if (entry.kind === 'directory') {
      files.push(...await getAllFiles(entry))
    }
  }
  return files
}

// 分片上传队列
class UploadQueue {
  constructor(concurrency = 3) {
    this.queue = []
    this.active = 0
    this.concurrency = concurrency
  }

  add(task) {
    this.queue.push(task)
    this.next()
  }

  next() {
    while (this.active < this.concurrency && this.queue.length) {
      const task = this.queue.shift()
      task().finally(() => {
        this.active--
        this.next()
      })
      this.active++
    }
  }
}

3.2 断点续传实现要点

1. 文件指纹生成策略：

javascript复制const calculateHash = (file) => {
  return new Promise(resolve => {
    const chunks = []
    const chunkSize = 5 * 1024 * 1024 // 5MB
    let cur = 0
    while (cur < file.size) {
      chunks.push(file.slice(cur, cur + chunkSize))
      cur += chunkSize
    }
    
    const worker = new Worker('/hash.js')
    worker.postMessage({ chunks })
    worker.onmessage = e => {
      resolve(e.data)
      worker.terminate()
    }
  })
}

2. 服务端校验接口设计：

java复制@GetMapping("/check")
public ResponseEntity<Map<String, Object>> checkChunk(
    @RequestParam String fileHash,
    @RequestParam String chunkHash,
    @RequestParam Integer chunkIndex) {
    
    // 检查分片是否已存在
    boolean exists = fileService.checkChunkExists(fileHash, chunkIndex);
    
    // 获取已上传分片索引
    List<Integer> uploaded = fileService.getUploadedChunks(fileHash);
    
    Map<String, Object> result = new HashMap<>();
    result.put("exists", exists);
    result.put("uploaded", uploaded);
    return ResponseEntity.ok(result);
}

4. 性能优化与异常处理

4.1 内存控制策略

1. 动态分片大小算法：

javascript复制const getOptimalChunkSize = (fileSize) => {
  const base = 5 * 1024 * 1024 // 5MB基础分片
  const max = 50 * 1024 * 1024 // 50MB上限
  // 每增加1GB，分片大小增加5MB
  return Math.min(base + Math.floor(fileSize / (1024 * 1024 * 1024)) * 5 * 1024 * 1024, max)
}

2. 上传速度自适应调节：

javascript复制const speedMonitor = {
  samples: [],
  add(speed) {
    this.samples.push(speed)
    if (this.samples.length > 5) this.samples.shift()
  },
  getAverage() {
    return this.samples.reduce((a,b) => a + b, 0) / this.samples.length || 0
  }
}

// 在上传回调中更新
onUploadProgress: (e) => {
  const speed = e.loaded / (e.timeStamp - startTime)
  speedMonitor.add(speed)
  if (speedMonitor.getAverage() < 1024 * 1024) { // 低于1MB/s
    // 降低并发数或增大分片
  }
}

4.2 常见异常处理方案

1. 网络中断重试机制：

javascript复制const uploadWithRetry = async (chunk, retries = 3) => {
  try {
    return await axios.post('/upload', chunk)
  } catch (err) {
    if (retries > 0 && !err.response?.status.toString().startsWith('4')) {
      await new Promise(resolve => setTimeout(resolve, 1000 * (4 - retries)))
      return uploadWithRetry(chunk, retries - 1)
    }
    throw err
  }
}

2. 服务端文件合并的原子性操作：

java复制public synchronized void mergeFiles(String fileHash, String fileName) throws IOException {
    // 创建临时合并文件
    Path temp = Files.createTempFile("merge-", ".tmp");
    try (OutputStream out = Files.newOutputStream(temp, StandardOpenOption.APPEND)) {
        // 按分片索引顺序合并
        for (int i = 0; ; i++) {
            Path chunk = Paths.get(chunkDir, fileHash + "." + i);
            if (!Files.exists(chunk)) break;
            
            Files.copy(chunk, out);
            Files.delete(chunk); // 删除已合并分片
        }
    }
    
    // 原子性重命名
    Path target = Paths.get(uploadDir, fileName);
    Files.move(temp, target, StandardCopyOption.ATOMIC_MOVE);
}

5. 企业级扩展方案

5.1 分布式存储集成

对于超大规模文件存储，建议采用MinIO集群方案：

yaml复制# docker-compose.yml配置示例
version: '3'
services:
  minio:
    image: minio/minio
    ports:
      - "9000:9000"
    environment:
      MINIO_ROOT_USER: admin
      MINIO_ROOT_PASSWORD: yourpassword
    command: server /data --console-address ":9001"
    volumes:
      - ./minio-data:/data

前端集成SDK：

javascript复制import * as MinIO from 'minio'

const minioClient = new MinIO.Client({
  endPoint: '内网minio地址',
  port: 9000,
  useSSL: false,
  accessKey: 'your-accesskey',
  secretKey: 'your-secretkey'
})

const uploadToMinIO = (bucketName, objectName, stream) => {
  return new Promise((resolve, reject) => {
    minioClient.putObject(bucketName, objectName, stream, (err, etag) => {
      if (err) return reject(err)
      resolve(etag)
    })
  })
}

5.2 安全增强措施

1. 加密上传方案：

javascript复制// 前端加密分片
const encryptChunk = async (chunk, key) => {
  const iv = window.crypto.getRandomValues(new Uint8Array(12))
  const algorithm = { name: 'AES-GCM', iv }
  const cryptoKey = await window.crypto.subtle.importKey(
    'raw', 
    new TextEncoder().encode(key),
    algorithm,
    false,
    ['encrypt']
  )
  const encrypted = await window.crypto.subtle.encrypt(
    algorithm,
    cryptoKey,
    chunk
  )
  return { iv, encrypted }
}

// 后端解密示例（Java）
public byte[] decrypt(byte[] encrypted, byte[] iv, String key) {
    Cipher cipher = Cipher.getInstance("AES/GCM/NoPadding");
    cipher.init(Cipher.DECRYPT_MODE, 
        new SecretKeySpec(key.getBytes(), "AES"),
        new GCMParameterSpec(128, iv));
    return cipher.doFinal(encrypted);
}

2. 内网传输优化建议：

• 启用HTTP/2协议提升并发性能
• 配置合适的TCP窗口大小（建议内网设置为2MB）

bash复制# Linux服务器调优
echo "net.ipv4.tcp_window_scaling = 1" >> /etc/sysctl.conf
echo "net.core.rmem_max = 2097152" >> /etc/sysctl.conf  
echo "net.core.wmem_max = 2097152" >> /etc/sysctl.conf
sysctl -p

6. 实测数据与调优建议

经过在政务内网环境下的压力测试（100台客户端同时上传），我们得到以下优化建议：

关键发现：

1. 内网交换机对并发连接数有限制，过高并发反而降低吞吐
2. Web Worker的实例数建议控制在CPU核心数的1.5倍
3. 文件夹上传建议采用广度优先遍历，减少内存占用

调试技巧：在Chrome开发者工具的Performance面板中，可以监控Web Worker的内存使用情况，当发现内存持续增长时，需要检查是否存在未释放的文件引用。