Vue3大文件上传实战：分片加密与断点续传方案-代码聚汇网

Vue3大文件上传实战：分片加密与断点续传方案

孔良

1. 项目概述：Vue3大文件上传解决方案实战

作为前端开发者，我们都遇到过这样的需求：客户要求实现大文件上传功能，还要兼容老旧浏览器，预算却少得可怜。最近我就接到了一个政务系统的外包项目，需要实现20GB以上文件的上传下载，并且要保留文件夹层级结构。经过两周的攻坚，我总结出一套完整的Vue3解决方案，现在分享给大家。

这套方案的核心优势在于：

原生JS实现，零商业授权费用
完整支持分片上传、断点续传
前端AES加密保障传输安全
完美兼容IE9等老旧浏览器
可直接集成到现有Vue3项目中

2. 技术方案设计

2.1 整体架构设计

系统采用前后端分离架构：

前端：Vue3 + Element Plus UI
后端：任意支持RESTful API的服务（示例中使用SpringBoot）
存储：阿里云OSS（也可替换为其他对象存储）

关键技术点：

文件分片：5MB/片（兼顾性能和兼容性）
断点续传：localStorage存储进度信息
加密传输：前端AES加密，后端解密存储
文件夹处理：递归遍历文件系统API

2.2 核心流程设计

上传流程：

用户选择文件/文件夹
前端计算文件哈希值（用于唯一标识）
检查服务器是否存在相同文件（秒传功能）
分片上传（5MB/片）
上传完成后通知服务端合并文件

下载流程：

获取文件列表
逐个生成下载链接
浏览器自动下载（非打包方式）

3. 前端实现详解

3.1 文件选择组件

javascript复制const selectFile = () => {
  const input = document.createElement('input');
  input.type = 'file';
  input.style.display = 'none';
  input.multiple = true;
  
  // 现代浏览器支持文件夹选择
  if (!/*@cc_on@*/false) {
    input.setAttribute('webkitdirectory', '');
  }

  input.addEventListener('change', handleFileSelect);
  document.body.appendChild(input);
  input.click();
  document.body.removeChild(input);
};

关键点：

动态创建input元素避免污染DOM
使用webkitdirectory属性支持文件夹选择
兼容IE9的特殊处理（条件注释）

3.2 分片上传实现

javascript复制const startUpload = async (task) => {
  // 检查断点进度
  const savedProgress = localStorage.getItem(`upload_${task.fileId}`);
  if (savedProgress) {
    const { chunkIndex, uploadedSize } = JSON.parse(savedProgress);
    task.chunkIndex = chunkIndex;
    task.uploadedSize = uploadedSize;
    task.progress = (uploadedSize / task.totalSize * 100).toFixed(1);
    task.status = '继续上传';
  }

  // 分片上传循环
  while (task.chunkIndex < task.totalChunks) {
    const start = task.chunkIndex * chunkSize;
    const end = Math.min(start + chunkSize, task.totalSize);
    const chunk = task.file.slice(start, end);

    // 前端AES加密
    const encryptedChunk = CryptoJS.AES.encrypt(
      CryptoJS.lib.WordArray.create(await readFile(chunk)),
      aesKey,
      { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }
    ).toString();

    // 构造上传参数
    const formData = new FormData();
    formData.append('fileId', task.fileId);
    formData.append('chunkIndex', task.chunkIndex);
    formData.append('totalChunks', task.totalChunks);
    formData.append('filePath', task.filePath);
    formData.append('chunk', new Blob([encryptedChunk]));

    // 上传分片
    try {
      const res = await fetch('/api/upload/chunk', {
        method: 'POST',
        body: formData
      });
      // ...处理响应
    } catch (err) {
      // 错误处理
    }
  }
};

3.3 断点续传实现

利用localStorage存储上传进度：

javascript复制// 保存进度
localStorage.setItem(`upload_${task.fileId}`, JSON.stringify({
  chunkIndex: task.chunkIndex,
  uploadedSize: task.uploadedSize
}));

// 读取进度
const savedProgress = localStorage.getItem(`upload_${task.fileId}`);
if (savedProgress) {
  const progress = JSON.parse(savedProgress);
  // 恢复上传
}

注意：生产环境建议使用IndexedDB替代localStorage，以获得更大的存储空间和更好的性能。

4. 后端接口设计

4.1 必要接口列表

接口类型	路径	方法	描述
分片上传	/api/upload/chunk	POST	接收文件分片
合并文件	/api/upload/merge	POST	合并所有分片
文件列表	/api/files/list	GET	获取文件列表
下载链接	/api/files/download	GET	获取下载链接

4.2 分片上传接口示例（SpringBoot）

java复制@PostMapping("/upload/chunk")
public ResponseEntity<?> uploadChunk(
    @RequestParam String fileId,
    @RequestParam int chunkIndex,
    @RequestParam int totalChunks,
    @RequestParam String filePath,
    @RequestParam MultipartFile chunk) {
    
    // 解密分片数据
    String encryptedData = new String(chunk.getBytes());
    String decryptedData = AESUtil.decrypt(encryptedData, secretKey);
    
    // 存储分片到临时目录
    String tempDir = "/tmp/uploads/" + fileId;
    File dir = new File(tempDir);
    if (!dir.exists()) dir.mkdirs();
    
    File chunkFile = new File(tempDir, chunkIndex + ".part");
    try (FileOutputStream fos = new FileOutputStream(chunkFile)) {
        fos.write(decryptedData.getBytes());
    }
    
    return ResponseEntity.ok().build();
}

5. 兼容性处理方案

5.1 IE9特殊处理

文件选择：

javascript复制// IE9不支持webkitDirectory，改用传统文件选择
if (isIE9) {
  input.removeAttribute('webkitdirectory');
}

路径处理：

javascript复制// IE9不支持webkitRelativePath，手动生成伪路径
const filePath = isIE9 
  ? `/${fileId}/${file.name}` 
  : file.webkitRelativePath;

文件读取：

javascript复制// IE9需要使用特定的FileReader API
const readFile = (file) => {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result);
    if (isIE9) {
      reader.readAsBinaryString(file);
    } else {
      reader.readAsArrayBuffer(file);
    }
  });
};

5.2 现代浏览器优化

对于现代浏览器，我们可以使用更高效的API：

使用Streams API处理大文件
使用Worker进行后台加密
使用IndexedDB存储进度信息

6. 性能优化建议

6.1 上传优化

并行上传：现代浏览器支持6个并发请求，可以充分利用
动态分片：根据网络状况动态调整分片大小
内存优化：及时释放已上传分片的内存

6.2 下载优化

直链下载：使用OSS等对象存储的直传功能
范围请求：支持HTTP Range头实现断点续传
压缩传输：对文本类文件启用gzip压缩

7. 安全方案

7.1 传输安全

前端加密：使用AES加密每个分片
HTTPS：必须启用HTTPS传输
密钥管理：动态获取加密密钥，避免硬编码

7.2 存储安全

服务端二次加密：使用SM4等算法加密存储
权限控制：严格的访问权限管理
日志审计：记录所有上传下载操作

8. 部署与测试

8.1 环境准备

前端依赖：

bash复制npm install vue@3 crypto-js element-plus

后端需求：

支持multipart/form-data的Web服务器
足够的临时存储空间（至少是最大文件大小的2倍）

8.2 测试建议

大文件测试：使用20GB以上文件测试断点续传
网络测试：模拟弱网环境测试上传稳定性
兼容性测试：覆盖IE9+、Chrome、Firefox等主流浏览器

9. 常见问题解决

9.1 上传中断问题

可能原因：

网络不稳定
服务器超时设置过短
浏览器内存不足

解决方案：

适当减小分片大小（如从5MB降到2MB）
增加服务器超时时间
使用Web Worker减少主线程压力

9.2 IE9兼容性问题

常见问题：

文件选择对话框不显示
上传进度不更新
内存溢出