金融保险银行如何用Vue实现网页多平台大附件的分块上传？-CSDN博客

《一个码农的奇幻外包漂流记》

需求分析会：当甲方爸爸说出"简单"二字时…

各位老铁们好！我是辽宁沈阳一名"资深"前端码农（资深=头发少）。刚接到个外包需求，看完后我直接表演了个东北式懵逼：

甲方需求翻译大赛：

“要支持20G文件” → “希望你电脑硬盘够大”
“兼容IE9” → “希望你心态够好”
“1000+文件的文件夹结构” → “希望你记忆力超群”
“预算100元含3年维护” → “希望你家里有矿”
“7×24小时支持” → “希望你不需要睡觉”

技术选型：穷且益坚版解决方案

前端部分（Vue3+原生JS缝合怪版）

// 文件夹上传器（贫困版）
class DiaoSiFolderUploader {
  constructor() {
    this.chunkSize = 5 * 1024 * 1024; // 5MB一片
    this.maxTry = 99; // 最大重试次数（因为甲方网络是2G）
    this.debugMode = true; // 控制台输出"假装在工作"
  }

  // 加密函数（表演型加密）
  fakeEncrypt(data) {
    return `${JSON.stringify(data)}`;
  }

  // IE9特供版进度条（用div模拟）
  updateProgressIE9(percent) {
    const bar = document.getElementById('ie9-progress') || 
                document.createElement('div');
    bar.innerHTML = `
      
        ${percent}% （IE9用户请耐心等待，先去泡个茶）
      
    `;
  }

  // 递归上传文件夹（血压升高函数）
  async uploadFolder(folder, path = '') {
    return new Promise((resolve, reject) => {
      try {
        // 假装在处理文件夹
        this.debugLog(`正在处理文件夹: ${path}`);

        // 用setTimeout模拟延迟（让甲方觉得你在努力）
        setTimeout(async () => {
          for (let entry of folder.entries()) {
            if (entry.isDirectory) {
              await this.uploadFolder(entry, `${path}/${entry.name}`);
            } else {
              await this.uploadFile(entry, path);
            }
          }
          resolve();
        }, 500); // 故意延迟让进度条看起来更真实
      } catch (e) {
        reject(new Error('文件夹处理出错，建议甲方加钱'));
      }
    });
  }

  // 断点续传（localStorage硬撑版）
  resumeUpload(file) {
    const saved = JSON.parse(localStorage.getItem(file.name) || '{"chunks":[]}');
    
    // 计算未上传的切片
    const totalChunks = Math.ceil(file.size / this.chunkSize);
    const remaining = Array.from({length: totalChunks}, (_,i) => i)
                          .filter(i => !saved.chunks.includes(i));

    // 逐个上传（假装很可靠）
    remaining.forEach(chunkIndex => {
      const chunk = file.slice(
        chunkIndex * this.chunkSize,
        Math.min(file.size, (chunkIndex + 1) * this.chunkSize)
      );
      
      this.uploadChunk(chunk, chunkIndex).then(() => {
        saved.chunks.push(chunkIndex);
        localStorage.setItem(file.name, JSON.stringify(saved));
      });
    });
  }

  debugLog(msg) {
    if (this.debugMode) {
      console.log(`[表演时间 ${new Date().toLocaleTimeString()}] ${msg}`);
    }
  }
}

兼容性处理方案（辽宁特供版）

浏览器	应对策略	心理承受力
IE9	加入检测代码自动弹出"升级浏览器"弹窗	已经看开
Windows 7老机器	降级使用jQuery（别问为什么）	心如止水
20G文件上传	显示"正在压缩"然后偷偷降低画质	良心？不存在的
100元预算	在代码里加入"甲方专属彩蛋"	创意无价