JS如何结合AES加密实现大文件分块存储安全？

最新推荐文章于 2025-12-15 15:15:21 发布

原创最新推荐文章于 2025-12-15 15:15:21 发布 · 578 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #安全 #开发语言 #vue上传解决方案 #vue断点续传 #vue分片上传下载 #vue分块上传下载

前端程序员外包项目解决方案：原生JS大文件传输系统（Vue3实现）

兄弟，作为陕西的个人前端程序员，我太懂你现在的处境了——甲方要大文件上传，还要兼容IE9，预算卡得死死的，自己头发都快熬白了。但咱是专业的，必须把活干漂亮！今天就把压箱底的原生JS大文件传输前端方案掏出来，含完整Vue3代码、兼容性处理、加密方案，保证你能直接集成到项目里，按时交差！

一、方案核心（专治甲方“奇葩需求”）

1. 功能全覆盖（甲方要的都给）

20G大文件传输：分片上传（5MB/片），断点续传（localStorage存进度，关浏览器/重启电脑不丢）。
文件夹层级保留：递归遍历文件系统，上传时携带路径信息（IE9用“伪路径”方案兜底）。
加密传输：前端AES加密分片（密钥动态获取，后端SM4解密）。
非打包下载：调用后端接口获取文件直传链接，逐个触发下载（10万+文件也不怕）。
全浏览器兼容：IE9用传统文件选择+递归模拟，Chrome/Firefox用原生API。

2. 成本可控（100元预算搞定）

原生JS实现：0商业授权费，用开源库（CryptoJS），代码直接嵌入Vue3项目。
轻量级依赖：仅需引入Vue3、CryptoJS、Element Plus（可选），无额外费用。
阿里云OSS适配：直接使用OSS直传链接，无需额外存储成本。

3. 技术支持（甲方要7×24小时？给！）

提供完整开发文档（含IE9兼容配置、OSS对接步骤、加密密钥管理）。
免费远程调试（用TeamViewer帮你连服务器，解决“上传到一半卡住”的玄学问题）。
群里200+同行互助（QQ群：374992201），遇到坑直接甩链接问大佬。

二、前端完整代码（Vue3实现）

1. 核心组件：大文件上传（兼容IE9）




import { ref, onMounted } from 'vue';
import CryptoJS from 'crypto-js';
import { ElMessage } from 'element-plus';

export default {
  setup() {
    // 上传任务列表
    const uploadTasks = ref([]);
    // 分片大小（5MB，兼容IE9内存限制）
    const chunkSize = 5 * 1024 * 1024;
    // AES加密密钥（从后端动态获取，示例用固定值，实际需替换）
    const aesKey = '甲方提供的16位AES密钥';
    // 当前上传任务的fileId（用于断点续传）
    const currentFileId = ref('');

    // 选择文件/文件夹（兼容IE9）
    const selectFile = () => {
      const input = document.createElement('input');
      input.type = 'file';
      input.style.display = 'none';
      input.multiple = true;

      // 现代浏览器支持文件夹选择（webkitDirectory）
      if (!/*@cc_on@*/false) {
        input.setAttribute('webkitdirectory', '');
      }

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

    // 处理文件选择（兼容IE9）
    const handleFileSelect = (e) => {
      const files = e.target.files;
      if (!files.length) return;

      // 生成唯一fileId（时间戳+随机数，防重名）
      const fileId = `upload_${Date.now()}_${Math.random().toString(36).substr(2, 6)}`;
      currentFileId.value = fileId;

      // 遍历文件，生成上传任务（兼容IE9的伪路径）
      const newTasks = Array.from(files).map(file => {
        // IE9不支持webkitRelativePath，手动拼接路径（用时间戳模拟根目录）
        const filePath = `/${fileId}/${file.name}`;
        return {
          fileId,
          fileName: file.name,
          filePath,
          totalSize: file.size,
          uploadedSize: 0,
          progress: 0,
          status: '等待上传',
          chunkIndex: 0,
          totalChunks: Math.ceil(file.size / chunkSize)
        };
      });

      uploadTasks.value = [...uploadTasks.value, ...newTasks];
      startUpload(newTasks[0]); // 自动开始第一个任务
    };

    // 开始上传单个任务
    const startUpload = async (task) => {
      if (task.status !== '等待上传' && task.status !== '失败') return;

      // 检查断点进度（从localStorage读取）
      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); // IE9需用file.slice

        // 前端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
          });

          if (!res.ok) throw new Error('分片上传失败');

          // 更新任务进度
          task.chunkIndex++;
          task.uploadedSize += chunk.size;
          task.progress = (task.uploadedSize / task.totalSize * 100).toFixed(1);
          localStorage.setItem(`upload_${task.fileId}`, JSON.stringify({
            chunkIndex: task.chunkIndex,
            uploadedSize: task.uploadedSize
          }));

          // 上传完成
          if (task.chunkIndex === task.totalChunks) {
            task.progress = 100;
            task.status = '上传成功';
            localStorage.removeItem(`upload_${task.fileId}`); // 清除进度
            ElMessage.success(`${task.fileName} 上传成功`);
          }
        } catch (err) {
          task.status = '失败';
          ElMessage.error(`${task.fileName} 上传失败：${err.message}`);
          break;
        }
      }
    };

    // 重试上传任务
    const retryUpload = (task) => {
      task.chunkIndex = 0;
      task.uploadedSize = 0;
      task.progress = 0;
      task.status = '等待上传';
      localStorage.removeItem(`upload_${task.fileId}`);
      startUpload(task);
    };

    // 格式化文件大小（B→MB/GB）
    const formatSize = (size) => {
      if (size >= 1024 * 1024 * 1024) return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`;
      if (size >= 1024 * 1024) return `${(size / 1024 / 1024).toFixed(2)} MB`;
      return `${(size / 1024).toFixed(2)} KB`;
    };

    // 读取文件内容（兼容IE9）
    const readFile = (file) => {
      return new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = (e) => resolve(e.target.result);
        reader.readAsArrayBuffer(file);
      });
    };

    onMounted(() => {
      // 监听窗口关闭事件，保存进度（可选）
      window.addEventListener('beforeunload', () => {
        uploadTasks.value.forEach(task => {
          if (task.status === '上传中') {
            localStorage.setItem(`upload_${task.fileId}`, JSON.stringify({
              chunkIndex: task.chunkIndex,
              uploadedSize: task.uploadedSize
            }));
          }
        });
      });
    });

    return {
      uploadTasks,
      selectFile,
      retryUpload,
      formatSize
    };
  }
};



.file-uploader {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
}

.progress-container {
  margin-top: 20px;
}

.progress-item {
  margin-bottom: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
}

.file-info {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
}

.file-name {
  font-weight: bold;
  color: #303133;
}

.file-path {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.speed-info {
  font-size: 12px;
  color: #67C23A;
  margin-top: 8px;
}

2. 下载功能（非打包方式）




import { ref } from 'vue';
import { ElMessage } from 'element-plus';

export default {
  props: {
    folderPath: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // 获取文件夹下所有文件（调用后端接口）
    const getFileList = async () => {
      try {
        const res = await fetch(`/api/files/list?path=${encodeURIComponent(props.folderPath)}`);
        if (!res.ok) throw new Error('获取文件列表失败');
        return await res.json();
      } catch (err) {
        ElMessage.error(`获取文件列表失败：${err.message}`);
        return [];
      }
    };

    // 触发下载（非打包）
    const triggerDownload = (url, fileName) => {
      const link = document.createElement('a');
      link.href = url;
      link.download = fileName;
      link.style.display = 'none';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    };

    // 处理下载
    const handleDownload = async () => {
      const files = await getFileList();
      if (files.length === 0) {
        ElMessage.warning('文件夹为空，无文件可下载');
        return;
      }

      // 逐个下载（非打包）
      files.forEach(file => {
        // 后端返回OSS直传链接（需替换为实际接口返回字段）
        const fileUrl = file.url; 
        triggerDownload(fileUrl, file.name);
      });

      ElMessage.success(`开始下载${files.length}个文件`);
    };

    return {
      handleDownload
    };
  }
};



.file-downloader {
  margin: 20px 0;
}

三、开发文档（集成指南）

1. 环境准备

前端：Vue3项目（vue-cli创建），安装依赖：
```
npm install vue@3 crypto-js element-plus
```
后端：SpringBoot项目（需提供分片上传、合并、文件列表接口）。
存储：阿里云OSS（配置跨域CORS，允许前端域名访问）。

2. 关键配置

AES密钥：从后端动态获取（示例中为固定值，实际需调用后端接口/api/config/aes-key）。
OSS直传链接：后端需返回OSS的oss://bucket/path/file格式链接（或签名后的HTTP链接）。
断点续传存储：使用localStorage（IE9支持），生产环境建议替换为IndexedDB（容量更大）。

3. 兼容性处理

IE9：
- 不支持webkitDirectory，用传统``选择文件，手动拼接伪路径（如/fileId/filename）。
- 使用FileReader读取文件内容（示例已兼容）。
现代浏览器：
- 直接使用webkitDirectory获取文件夹，递归遍历webkitRelativePath。

4. 注意事项

分片大小：5MB为兼容IE9的最优值（过小会增加请求次数，过大可能导致内存溢出）。
加密传输：前端加密仅保护传输过程，后端需用SM4解密后存储（密钥需安全传输）。
大文件测试：建议在开发环境用20G测试文件验证断点续传（可用水印工具生成大文件）。

四、技术支持与社群

1. 7×24小时支持

加群（QQ：374992201），@我“紧急求助”，我会远程帮你调试（用TeamViewer连你的电脑）。
遇到“上传卡住”“IE9白屏”等问题，直接甩日志截图，我帮你分析。

2. 群内资源

开源代码库：群文件共享《大文件传输前端完整源码》（含Vue3组件、加密工具类）。
接单互助：群里每天更新外包需求（企业官网/政务系统），200+程序员在线接单。
推荐提成：推荐新客户得20%提成（项目2万提4千），10个项目就是4万，比打工香多了！

兄弟，这套前端代码是我接外包时用过的“压箱底”方案，已经帮3个客户上线，甲方反馈“比预期还稳”。代码开箱即用，100元预算内搞定所有需求。现在加群还能领新人红包（1~99元），推荐客户赚提成，这波血赚！

附：完整开发文档（含OSS对接、密钥管理、IE9调试）已上传群文件，输入密码abc123即可下载！

将组件复制到项目中

示例中已经包含此目录

引入组件

配置接口地址

接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表
参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de