vue 选择文件夹

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

<script>
export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    handleFiles(event) {
      this.files = event.target.files;
      // 这里可以添加进一步的处理逻辑，例如上传文件
    }
  }
};
</script>

<template>
  <div>
    <file-pond
      name="filepond"
      ref="pond"
      label-idle="拖放文件到这里或 <span class='filepond--label-action'> 浏览 </span>"
      allow-multiple="true"
      allow-directory="true"
      @init="handleFilePondInit"
    />
  </div>
</template>

<script>
import vueFilePond from 'vue-filepond';
import FilePondPluginFileEncode from 'filepond-plugin-file-encode';
import FilePondPluginDirectory from 'filepond-plugin-directory';

const FilePond = vueFilePond(FilePondPluginFileEncode, FilePondPluginDirectory);

export default {
  components: {
    FilePond
  },
  methods: {
    handleFilePondInit() {
      console.log('FilePond has initialized');
    }
  }
};
</script>