（抱着键盘在宿舍转圈圈版）

各位大佬好呀！我是福州某大学·网络工程·大三·刚学会console.log()的·编程小白·秃头预备役。最近被导师按头要求搞个"能上传10G文件还带加密的文件夹传输系统"，现在每天的状态be like：

💻 前端：我会Vue3！
🖥️ 后端：Python是啥？能吃吗？
📂 数据库：MySQL…是那个会游泳的乌龟吗？

---

🎯 前端の绝地求生（Vue3+原生JS魔改版）

// 魔改WebUploader核心片段（兼容IE8的降级方案）
class PoorManUploader {
  constructor() {
    this.chunks = []; // 存储分片信息
    this.browser = this.detectAncientBrowser(); // 检测上古浏览器
    this.initFileInput(); // 兼容IE8的文件选择
  }

  // 浏览器探测术（能识别IE6-11的玄学方法）
  detectAncientBrowser() {
    const ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf('msie') > -1) return 'ie' + ua.match(/msie (\d+)/)[1];
    if (ua.indexOf('trident') > -1) return 'ie11';
    return 'modern'; // 其他现代浏览器
  }

  // 文件夹上传核心逻辑（递归遍历FileList）
  handleFolderUpload(event) {
    if (this.browser.startsWith('ie')) {
      alert('IE用户请自觉切换Chrome！');
      return;
    }

    const files = event.target.files;
    const fileTree = this.buildFileTree(files); // 构建树形结构
    this.encryptTree(fileTree).then(encryptedTree => {
      this.sliceAndUpload(encryptedTree); // 切片上传
    });
  }

  // 构建文件树（递归算法）
  buildFileTree(files, parentPath = '') {
    const tree = {};
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const path = file.webkitRelativePath || file.name; // 兼容不同浏览器
      
      if (path.includes('/')) {
        const dirs = path.split('/');
        const fileName = dirs.pop();
        let currentDir = tree;
        
        // 递归创建目录结构
        dirs.forEach(dir => {
          if (!currentDir[dir]) currentDir[dir] = {};
          currentDir = currentDir[dir];
        });
        
        currentDir[fileName] = file; // 存储文件对象
      } else {
        tree[file.name] = file; // 根目录文件
      }
    }
    return tree;
  }

  // 魔改版分片上传（带断点续传）
  sliceAndUpload(fileNode, parentPath = '') {
    const chunkSize = 5 * 1024 * 1024; // 5MB分片
    const file = fileNode instanceof File ? fileNode : fileNode.file;
    const totalChunks = Math.ceil(file.size / chunkSize);
    
    // 从localStorage恢复进度（IE8兼容版）
    const savedProgress = localStorage.getItem(`progress_${file.name}`);
    let startChunk = savedProgress ? parseInt(savedProgress) : 0;

    for (let i = startChunk; i < totalChunks; i++) {
      const blob = file.slice(i * chunkSize, (i + 1) * chunkSize);
      const formData = new FormData();
      formData.append('file', blob);
      formData.append('chunkIndex', i);
      formData.append('totalChunks', totalChunks);
      formData.append('fileId', this.generateFileId(file));
      formData.append('parentPath', parentPath); // 保留层级结构
      
      // 使用XMLHttpRequest兼容IE
      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/api/upload', true);
      xhr.onload = () => {
        if (xhr.status === 200) {
          localStorage.setItem(`progress_${file.name}`, i + 1);
          if (i === totalChunks - 1) {
            console.log(`${file.name} 上传完成！`);
            // this.mergeChunks(fileNode); // 合并分片（后端实现）
          }
        }
      };
      xhr.send(formData);
    }
  }
}

// 在Vue组件中使用
export default {
  mounted() {
    this.uploader = new PoorManUploader();
  },
  methods: {
    triggerUpload() {
      document.getElementById('fileInput').click();
    }
  }
}

💡 生存指南（血泪经验）

1. IE兼容性：

   • 文件选择用``的降级方案
   • 引入es5-shim和json2.js垫片
   • 放弃CSS3动画改用jQuery淡入淡出

2. 断点续传：

   • 用localStorage存储进度（IE8可用）
   • 服务器端需要记录已上传的分片（但我还不会写后端）
   • 合并前校验所有分片完整性（后端实现）

3. 加密传输：

   • 前端用CryptoJS加密（但加密后文件变大怎么办？）
   • 后端解密后重新加密存储（求大神教我Python）
   • 传输使用HTTPS（本地开发用自签名证书）

4. 面试吹牛技巧：

   • “这个系统支持PB级文件传输”（实际最多10G）
   • “采用区块链技术加密”（其实就是Base64）
   • “通过量子计算优化分片算法”（其实随机切的）

---

📢 紧急求助

现在系统存在以下致命问题：

1. IE8上传超过2GB文件会崩溃（求优化方案）
2. 文件夹层级超过3层会丢失结构（递归算法写崩了）
3. 加密后的文件在Python后端无法解密（求后端代码）
4. 合并分片时偶尔会丢数据（数据库设计不会）

求各位大佬加群374992201拯救！现在入群可享：

• 免费获得价值998元的《如何在毕业设计里混过去》电子书
• 参与"帮学弟改BUG"活动赢取奶茶基金
• 推荐工作成功送《职场舔狗指南》纸质版

（突然正经）PS：真的求后端师傅！本人擅长：

• 熬夜改前端BUG
• 写注释骗评审
• PPT画大饼
• 帮师傅买奶茶

联系方式：QQ群374992201（暗号：我要毕业）
群内活动：

1. 新人入群送1-99元红包
2. 推荐新人得20%提成
3. 超级会员享50%分成（未来项目）

求师哥师姐推荐工作！本人要求不高：

• 工资够买奶茶
• 同事会讲段子
• 领导不画大饼
• 能带饭的优先

将组件复制到项目中

示例中已经包含此目录

引入组件

配置接口地址

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

处理事件

启动测试

启动成功

效果

数据库

效果预览

文件上传

文件刷新续传

支持离线保存文件进度，在关闭浏览器，刷新浏览器后进行不丢失，仍然能够继续上传

文件夹上传

支持上传文件夹并保留层级结构，同样支持进度信息离线保存，刷新页面，关闭页面，重启系统不丢失上传进度。

下载示例

点击下载完整示例