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

在Vue3中使用TypeScript实现点击上传整个文件夹并读取文件夹里面的所有数据，可以通过HTML的`<input type="file" webkitdirectory>`属性来实现。这个属性允许用户选择文件夹而不是单个文件，并且会将文件夹中的所有文件作为FileList对象返回。

以下是一个简单的示例代码：

<template>
  <div>
    <input type="file" @change="handleFileChange" webkitdirectory directory multiple />
    <ul>
      <li v-for="(file, index) in files" :key="index">{{ file.name }}</li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const files = ref<File[]>([]);

    const handleFileChange = (event: Event) => {
      const input = event.target as HTMLInputElement;
      if (input.files) {
        files.value = Array.from(input.files);
      }
    };

    return {
      files,
      handleFileChange
    };
  }
});
</script>

在这个示例中：
1. `<input type="file" @change="handleFileChange" webkitdirectory directory multiple />` 这行代码创建了一个文件输入元素，用户可以选择一个文件夹，并且通过设置`webkitdirectory`和`directory`属性，可以允许选择文件夹。
2. 当用户选择文件夹后，会触发`change`事件，调用`handleFileChange`方法。
3. 在`handleFileChange`方法中，我们从事件对象中获取到文件列表，并将其存储在响应式的`files`数组中。
4. 使用`v-for`指令在模板中遍历`files`数组，并显示每个文件的名称。

这样，当用户选择文件夹并上传时，Vue组件就会读取文件夹中的所有文件，并将它们显示在页面上。