vue3点击上传整个文件夹，读取文件夹里面的所有数据

在Vue3中，要实现点击上传整个文件夹并读取文件夹里面的所有数据，你可以使用HTML的`<input type="file" webkitdirectory>`属性来允许用户选择文件夹。然后，通过JavaScript的File API来处理和读取文件夹中的文件。

以下是一个简单的示例：

1. 首先，在你的Vue组件中添加一个文件输入元素，并设置`webkitdirectory`属性以允许选择文件夹：

<template>
  <div>
    <input type="file" @change="handleFileChange" webkitdirectory directory multiple>
  </div>
</template>

2. 接下来，在你的Vue组件的methods中添加`handleFileChange`方法来处理文件选择事件：

<script>
export default {
  methods: {
    handleFileChange(event) {
      const files = event.target.files;
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        this.readFile(file);
      }
    },
    readFile(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        console.log(`File name: ${file.name}`);
        console.log(`File content: ${e.target.result}`);
      };
      reader.readAsText(file); // 或者使用readAsDataURL, readAsArrayBuffer等根据文件类型选择合适的方法
    }
  }
}
</script>

在这个示例中，当用户选择一个文件夹时，`handleFileChange`方法会被触发。这个方法会遍历所有选中的文件，并对每个文件调用`readFile`方法。`readFile`方法使用`FileReader`对象来异步读取文件内容，并在读取完成后打印出文件名和内容。

请注意，由于安全原因，Web浏览器通常不允许网页直接访问本地文件系统的完整路径，因此你只能读取文件的内容，而不能获取文件的完整路径。