vue上传文件夹好用的插件

可以使用 `vue-upload-component` 插件来上传文件夹，它支持多文件上传和文件夹上传。

具体使用方法可以参考如下代码：

<template>
  <div>
    <vue-upload-component
      ref="fileInput"
      name="file"
      :multiple="true"
      :directory="true"
      @input-filter="inputFilter"
      @start="onUploadStart"
      @progress="onUploadProgress"
      @success="onUploadSuccess"
      @error="onUploadError"
      @abort="onUploadAbort"
    ></vue-upload-component>
  </div>
</template>

<script>
import VueUploadComponent from 'vue-upload-component';

export default {
  components: {
    VueUploadComponent
  },
  methods: {
    inputFilter(newFile, oldFile, prevent) {
      // 过滤条件
      if (newFile.type !== 'image/png') {
        prevent();
      }
    },
    onUploadStart(file) {
      console.log('开始上传', file);
    },
    onUploadProgress(progressEvent, file) {
      console.log('上传进度', progressEvent.percent);
    },
    onUploadSuccess(response, file) {
      console.log('上传成功', response);
    },
    onUploadError(error, file) {
      console.log('上传失败', error.message);
    },
    onUploadAbort(file) {
      console.log('上传取消', file);
    }
  }
};
</script>

在上面的代码中，`VueUploadComponent` 组件是用来实现文件上传的，其中 `directory` 属性设置为 `true` 表示支持上传文件夹，`multiple` 属性设置为 `true` 表示支持多文件上传。同时还可以通过绑定 `@input-filter` 事件来实现文件过滤，`@start`、`@progress`、`@success`、`@error`、`@abort` 等事件则是用来处理上传文件的各个阶段，具体使用方法可以参考上面的代码注释。