vue+elementui实现文件/文件夹，拖拽文件/文件夹上传

在Vue中结合Element UI实现拖拽上传文件/文件夹的功能，可以使用第三方库如vue-drag-drop来简化实现过程。以下是一个简单的示例：

1. 安装vue-drag-drop库：

npm install vue-drag-drop --save

2. 在Vue组件中使用：

<template>
  <div>
    <draggable-upload
      class="drag-container"
      :on-drop="handleDrop"
      :multiple="true"
      :directory="true">
      拖拽文件或文件夹到此上传
    </draggable-upload>
  </div>
</template>
 
<script>
import DraggableUpload from 'vue-drag-drop';
 
export default {
  components: {
    DraggableUpload
  },
  methods: {
    handleDrop(files) {
      // 使用FormData进行文件上传
      const formData = new FormData();
      files.forEach(file => {
        formData.append('files[]', file);
      });
 
      // 这里可以使用axios或者其他HTTP库发送请求
      // axios.post('your-upload-url', formData).then(response => {
      //   console.log(response.data);
      // });
 
      console.log(formData);
    }
  }
};
</script>
 
<style>
.drag-container {
  border: 2px dashed #ccc;
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
  cursor: pointer;
}
</style>

在这个例子中，我们创建了一个Vue组件，其中包含了draggable-upload组件，该组件允许用户拖拽文件和文件夹进行上传。当用户拖拽文件或文件夹到指定区域后，会触发handleDrop方法，该方法使用FormData收集文件并打印出来。实际应用中，你需要替换// your-upload-url为你的文件上传API地址，并使用例如axios之类的HTTP库来发送文件数据。