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

对于你的问题，我可以给出一些建议：Vue.js 的拖拽上传文件夹功能可以通过使用 Dropzone.js 这样的第三方库实现。Dropzone.js 支持各种类型的文件上传，并提供了丰富的配置选项，可适应不同浏览器的上传需求。也可以考虑使用 HTML5 的拖放 API 来实现拖拽上传文件夹的功能。使用 HTML5 拖放 API 可以获得更好的性能和用户体验。希望这些信息对您有所帮助。

相关问题

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格式的文件，然后上传该文件，服务器再解压缩即可。

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 不支持文件夹上传，所以在苹果浏览器中，只能选择上传文件，而不能上传文件夹。