告诉Vue在不更改图像名称的情况下查看文件夹中的所有图片

<template>
  <div>
    <input type="file" @change="handleFolderSelect" directory webkitdirectory />
    <div v-for="image in images" :key="image.name">
      <img :src="image.url" alt="image" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: []
    };
  },
  methods: {
    handleFolderSelect(event) {
      const files = event.target.files;
      const reader = new FileReader();
      const images = [];

      const readFiles = (index) => {
        if (index >= files.length) {
          this.images = images;
          return;
        }

        const file = files[index];
        if (file.type.startsWith('image/')) {
          reader.onload = () => {
            images.push({
              name: file.name,
              url: reader.result
            });
            readFiles(index + 1);
          };
          reader.readAsDataURL(file);
        } else {
          readFiles(index + 1);
        }
      };

      readFiles(0);
    }
  }
};
</script>