vue-simple-uploader 上传组件如何过滤掉文件夹？

Question

用到了第三方上传组件 vue-simple-uploader，但是不需要支持文件夹上传，所以需要过滤掉文件夹，但是拖拽上传时是可以选择文件夹的，该如何过滤掉文件夹呢？

Answer 1

directory 设置为 false 呗，但是我看默认就是 false 哇。

UploaderBtn

点选上传文件按钮。

Props

• directory {Boolean}
  默认 false, 是否是文件夹上传。
• single {Boolean}
  默认 false, 如果设为 true，则代表一次只能选择一个文件。
• attrs {Object}
  默认 {}, 添加到 input 元素上的额外属性。

#directory - props - UploaderBtn - vue-uploader/README_zh-CN.md at master · simple-uploader/vue-uploader

Answer 2

<template>
  <div>
    <uploader :options="options" class="uploader-example">
      <uploader-drop @drop="handleDrop">
        <p>Drop files here to upload or</p>
        <uploader-btn>select files</uploader-btn>
      </uploader-drop>
      <uploader-list></uploader-list>
    </uploader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        target: '//localhost:3000/upload',
        testChunks: false,
      },
    };
  },
  methods: {
    handleDrop(event) {
      const items = event.dataTransfer.items;
      const files = [];

      for (let i = 0; i < items.length; i++) {
        const item = items[i].webkitGetAsEntry();
        if (item && item.isFile) {
          files.push(items[i].getAsFile());
        }
      }

      // Process the files array as needed
      console.log('Filtered files:', files);
    },
  },
};
</script>

<style>
.uploader-example {
  width: 880px;
  padding: 15px;
  margin: 40px auto 0;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.uploader-example .uploader-btn {
  margin-right: 4px;
}
.uploader-example .uploader-list {
  max-height: 440px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>