vue 中实现用户上传文件夹的功能

在Vue中实现用户上传文件夹功能，可以通过监听<input type="file">元素的change事件来实现。以下是一个简单的示例：

<template>
  <div>
    <input type="file" webkitdirectory directory multiple @change="handleFolderSelect"/>
  </div>
</template>
 
<script>
export default {
  methods: {
    handleFolderSelect(event) {
      const files = event.target.files;
      for (let i = 0; i < files.length; i++) {
        // 这里可以获取文件夹中的每个文件
        const file = files[i];
        console.log(file.name);
        // 处理文件...
      }
    }
  }
}
</script>

在这个例子中，webkitdirectory和directory属性允许用户选择整个文件夹，而不是单独的文件。multiple属性允许用户选择文件夹内的多个文件。当用户选择了文件夹后，handleFolderSelect方法会被触发，并接收到一个事件对象，其中包含了用户选择的所有文件。然后可以遍历event.target.files数组来处理每个文件。