vue上传文件夹,拖拽上传文件夹好用的插件

有一些常用的Vue插件可以实现上传文件夹或拖拽上传文件夹的功能，推荐几个：

1. vue-upload-folder：一个基于Vue.js的上传文件夹组件，支持拖拽上传和浏览器选择上传两种方式。

2. vue-drag-drop-file：一个简单易用的Vue拖拽上传组件，支持上传单个或多个文件，也支持上传文件夹。

3. vue-file-agent：一个高度可定制的Vue文件上传组件，支持上传单个或多个文件，也支持上传文件夹。

4. vue-upload-component：一个基于Vue.js的文件上传组件，支持拖拽上传、浏览器选择上传和粘贴上传等方式，也支持上传文件夹。

以上插件都有详细的文档和示例，可以根据自己的需求选择使用。

相关问题

vue上传文件夹,拖拽上传文件夹，能够兼容苹果浏览器的好用插件

你可以尝试使用 dropzone.js 插件，它支持拖拽上传文件和文件夹，并且能够兼容苹果浏览器。使用该插件需要在 Vue 中进行相应的配置和调用。以下是一个简单的示例：

1. 安装 dropzone.js

npm install dropzone --save

2. 在 Vue 中引入并配置 dropzone.js

// 引入 dropzone.js
import Dropzone from 'dropzone'
import 'dropzone/dist/dropzone.css'

export default {
  mounted() {
    // 初始化 dropzone.js
    this.initDropzone()
  },
  methods: {
    initDropzone() {
      // 配置 dropzone.js
      const myDropzone = new Dropzone(this.$refs.myDropzone, {
        // 上传 URL
        url: '/upload',
        // 可上传的最大文件大小
        maxFilesize: 5,
        // 可上传的最大文件数量
        maxFiles: 10,
        // 是否允许上传文件夹
        uploadMultiple: true,
        // 允许上传的文件类型
        acceptedFiles: 'image/*,application/pdf',
        // 其他配置项...
      })

      // 监听上传成功事件
      myDropzone.on('success', function(file, response) {
        // 上传成功后的处理
      })
    }
  }
}

3. 在模板中添加 dropzone.js 的 HTML 结构

<template>
  <div>
    <div ref="myDropzone" class="dropzone"></div>
  </div>
</template>

注意：由于 Safari 不支持文件夹上传，所以在苹果浏览器中，只能选择上传文件，而不能上传文件夹。

vue上传文件夹,拖拽上传文件夹，能够兼容各大浏览器

Vue.js本身并不提供上传文件夹和拖拽上传文件夹的功能，但可以通过使用一些第三方库来实现。

其中比较常用的是`dropzone.js`和`fine-uploader`。这两个库都提供了丰富的API和事件，可以满足各种上传需求，并且支持多浏览器兼容。

使用`dropzone.js`可以在Vue组件中轻松实现拖拽上传文件夹的功能，示例代码如下：

<template>
  <div class="dropzone" ref="dropzone">
    <div class="fallback">
      <input type="file" multiple @change="onSelectFile"/>
    </div>
  </div>
</template>

<script>
import Dropzone from 'dropzone'

export default {
  mounted () {
    const dropzone = new Dropzone(this.$refs.dropzone, {
      url: '/upload',
      paramName: 'file',
      maxFilesize: 2, // MB
      acceptedFiles: '.zip',
      dictDefaultMessage: '拖拽文件到此处上传',
      dictFallbackMessage: '当前浏览器不支持拖拽上传，请选择文件进行上传。',
      init: function () {
        this.on('addedfile', function (file) {
          console.log(file)
        })
      }
    })
  },
  methods: {
    onSelectFile (event) {
      const files = event.target.files
      console.log(files)
    }
  }
}
</script>

<style>
.dropzone {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
}
</style>

以上代码可以实现拖拽上传文件夹的功能，并且可以限制上传的文件类型、文件大小等。

另外，如果需要上传整个文件夹，可以在程序端将文件夹压缩成zip格式的文件，然后上传该文件，服务器再解压缩即可。