el-upload支持文件夹拖拽上传，代码实现

`el-upload`是Element UI库中的一个组件，用于实现文件上传功能。如果你想让它支持文件夹拖拽上传，你需要配置其`autoUpload`属性，并配合一些JavaScript事件处理。以下是一个简单的示例代码实现：

<template>
  <el-upload
    :action="uploadUrl"
    :auto-upload="false" // 关闭自动上传，需要手动触发
    :data="fileData" // 自定义请求头或参数
    :on-change="handleChange" // 拖拽文件时触发
    :on-success="handleSuccess"
    multiple
    drag
  >
    <i class="el-icon-upload"></i> <em>点击上传</em>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      uploadUrl: 'your-server-url', // 服务器接收文件的URL
      fileData: {}, // 需要附加到文件上传请求的数据
      fileList: [] // 用于存储上传文件的信息
    };
  },
  methods: {
    handleChange(file) {
      if (file.isDirectory) { // 判断是否为文件夹
        this.handleFolderDrag(file);
      } else {
        // 如果不是文件夹，直接添加到文件列表
        this.fileList.push(file);
      }
    },
    handleFolderDrag(folder) {
      const newFiles = []; // 存储新上传的文件
      folder.children.forEach(child => {
        child.name === '.' || child.name === '..' ? null : newFiles.push(child);
      });
      this.fileList = [...this.fileList, ...newFiles]; // 添加新的文件到文件列表
      // 然后你可以根据需要发送一个POST请求，包含所有这些文件
      this.sendMultiFileRequest(newFiles);
    },
    sendMultiFileRequest(files) {
      fetch('your-server-url', {
        method: 'POST',
        body: files.map(file => new FormData()).reduce((form, curr) => form.append(...curr), []),
        headers: this.fileData,
      })
        .then(response => response.json())
        .then(data => console.log('文件上传成功:', data))
        .catch(error => console.error('文件上传失败:', error));
    },
    handleSubmit() {
      this.$refs.upload.submit(); // 手动触发上传
    }
  }
};
</script>

这个代码示例中，当用户拖放文件夹时，会递归获取文件夹内的文件并添加到文件列表。然后，你需要根据实际情况发送一个多文件POST请求。注意，这只是一个基础示例，实际应用中可能还需要处理更多边界情况和错误处理。