WebUploader实现20GB文件夹上传与IE8兼容方案

1. 项目背景与技术挑战

凌晨1:30的暴雨夜，我正面临一个极具挑战性的外包项目需求：基于WebUploader实现20GB级文件夹传输功能，并且要兼容IE8浏览器。这个需求看似简单，实则暗藏多个技术难点：

1. 文件夹结构保持：WebUploader原生只支持文件选择，无法保留文件夹层级
2. IE8兼容性：现代API如FileSystem API完全不可用
3. 断点持久化：需要实现跨浏览器会话的进度保存
4. 非打包下载：避免服务器压缩数万文件导致的性能灾难

提示：处理大文件上传时，内存管理是关键。直接读取整个文件到内存会导致服务器崩溃，必须采用分片上传策略。

2. 前端文件夹采集方案

2.1 现代浏览器实现

通过分析Windows/MacOS的目录选择行为，发现webkitdirectory这个隐藏属性可以获取文件夹内容：

html复制<input type="file" webkitdirectory directory multiple>

对应的Vue3处理逻辑如下：

javascript复制// folder-processor.js
export const scanFolder = async (entries, path = '') => {
  const items = []
  for (const entry of entries) {
    const item = {
      path: path + entry.name,
      isFile: entry.isFile
    }
    
    if (entry.isFile) {
      item.file = entry
      items.push(item)
    } else {
      items.push({
        ...item,
        children: await scanFolder(
          await readDirectory(entry),
          path + entry.name + '/'
        )
      })
    }
  }
  return items
}

2.2 IE8兼容方案

在IE8环境下，我们不得不使用古老的ActiveXObject技术：

javascript复制// ie8-compat.js
document.attachEvent('onclick', function() {
  if (window.ActiveXObject) {
    var fso = new ActiveXObject("Scripting.FileSystemObject")
    var folder = fso.GetFolder(selectedPath)
    tr