1.拖拽上传
挂载阶段

const upload = document
      .getElementById(componentsId)
      .getElementsByClassName("el-upload")[0]; // 这个位置由自己定
    upload.addEventListener("drop", uploadFunc, false);
    upload.addEventListener("dragover", handleDragOver, false);

主要方法

// 阻止默认事件
const handleDragOver = event => {
  event.preventDefault();
};
// 拖拽结束事件
async function uploadFunc(event) {
  event.preventDefault();
  const dataTransferItemList = event.dataTransfer.items; // 获取文件的数据
  const dataList = [];
  for (const dataitem of dataList) {
      console.log("开始上传");
      if (dataitem.isDirectory) {
        console.log('文件夹')
        await handlefile(dataitem, fileId);
      } else {
        console.log('文件')
      }
    }
 });
}
// 拖拽结束后处理文件夹函数
async function handlefile(file) {
  return new Promise(async resolve => {
    if (file.isFile) {
      // 是文件执行上传操作
      await file.file(async function (f) {
        //file.file() 方法用于读取文件内容
        // f才是最终的文件
        resolve();
        return;
      });
    } else {
      // 是文件夹，读取文件夹里的文件，遍历文件夹
      const dirReader = file.createReader();
      await dirReader.readEntries(async function (entries) {
        // 遍历entries，对文件进行处理
        for (let i = 0; i < entries.length; i++) {
          if (entries[i].isDirectory) {
            console.log('文件夹')
          }
          await handlefile(entries[i]);
        }
        resolve();
      });
    }
  });
}

2.通过按钮点击上传
挂载阶段

const element = document.getElementsByClassName("upload-floder");
const item = element[0]?.getElementsByClassName("el-upload__input")?.[0];
item.webkitdirectory = true;
item.allowdirs = true;
item.directory = true;

主要代码

/** 上传预处理 :before-upload="beforeUpload" */
function beforeUpload(file) {
  _fileList.value.push(file);
}
// 自定义上传方法 :http-request="requestUpload"
async function requestUpload(fileParams) {
  // 这里可以做个防抖
 const tree = handleFloder(_fileList.value);
      // 存完之后再进行递归
      for (let i in tree) {
        if (!(tree[i] instanceof File)) {
          console.log(`创建文件夹, 开始递归`);
          await traverseTree(tree[i]);
        } else {
           console.log(`是文件`);
        }
      }
}
// 处理目录结构
function handleFloder(fileList) {
  const tree = {};
  fileList.forEach(item => {
    const pathParts = item.webkitRelativePath.split("/");
    let current = tree;
    pathParts.forEach((part, pIndex) => {
      if (!current[part]) {
        current[part] = {};
      }
      if (current[item.name]) {
        current[item.name] = item;
      }
      current = current[part];
    });
  });
  return tree;
}
// 递归遍历树节点
async function traverseTree(file) {
  if (file instanceof File) {
    console.log('是文件')
    return;
  } else {
    // 是文件夹，读取文件夹里的文件，遍历文件夹
    for (let i in file) {
      if (!(file[i] instanceof File)) {
        console.log('是文件夹,可以在这里进行操作')
      }
      await traverseTree(file[i]);
    }
  }
}