为什么 useDropZone 不适用于数据类型：['image/*']？

Question

我使用Vue 3。 为什么 VueUse 10.9.0（最新版本）中的 useDropZone 无法处理

dataTypes: ['image/*']

？ 我想通过拖放和/或（用户定义的）选择来实现加载单个图像。当设置

dataTypes: ['image/*']

时，拖放将停止工作。如果指定

dataTypes: ['image/png']

，则可以进行拖放操作，但仅适用于 png 图像。我需要支持所有图像格式，如

'image/*'

。

我不明白什么，或者 VueUse 没有在 useDropZone 中实现对

'image/*'

的支持？

我的完整 vue 代码：

<script setup lang="ts">
import { ref } from 'vue'
import { useDropZone} from '@vueuse/core'

const imageFilesData = ref<{ name: string, size: number, type: string, lastModified: number }[]>([])

function onImageDrop(files: File[] | null) {
    imageFilesData.value = []
    if (files) {
        imageFilesData.value = files.map(file => ({
            name: file.name,
            size: file.size,
            type: file.type,
            lastModified: file.lastModified,
        }))
    }
}

const imageDropZoneRef = ref<HTMLElement>()


const { isOverDropZone: isOverImageDropZone } = useDropZone(imageDropZoneRef, {dataTypes: ['image/*'], onDrop: onImageDrop })
</script>

<template>
    <div class="flex flex-col gap-2">
        <div class="w-full h-auto relative">
            <p>Drop files on to drop zones</p>
            <div grid="~ cols-2 gap-2">
                <div
                    ref="imageDropZoneRef"
                    class="flex flex-col w-full min-h-[200px] h-auto bg-gray justify-center items-center mt-6 rounded"
                >
                    <div class="font-bold mb-2">
                        Image DropZone
                    </div>
                    <div>
                        isOverDropZone:
                        <span :class="isOverImageDropZone ? 'text-green-600 shadow-1' : 'text-red-600 shadow-1'">{{ isOverImageDropZone }}</span>
                    </div>
                    <div class="flex flex-wrap justify-center items-center">
                        <div v-for="(file, index) in imageFilesData" :key="index" class="w-[200px] bg-gray-200 m-2 p-6">
                            <p>Name: {{ file.name }}</p>
                            <p>Size: {{ file.size }}</p>
                            <p>Type: {{ file.type }}</p>
                            <p>Last modified: {{ file.lastModified }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

Answer 1

源代码显示拖放区将拖动的数据类型与拖放区选项中的

dataTypes

数组进行比较，因此通配符不起作用。

但是，您可以为

dataTypes

选项提供一个函数，让您提供自定义过滤器逻辑。

// returns true if data type starts with "image", otherwise returns false
function isImage(types: readonly string[]) {
  return !types.some(type => !type.startsWith('image'))
}

const { isOverDropZone: isOverImageDropZone } = useDropZone(imageDropZoneRef, {
  dataTypes: isImage,
  onDrop: onImageDrop
})