vue3实现全屏拖拽上传文件

第一步：封装全屏组件

<template>
    <div class="cover fullScreenUpload flex" 
    v-if="showDrag" 
    @dragleave="() => { showDrag = false }" 
    @drop="dropFile" 
    @dragover="(e) => { e.preventDefault() }">
        <div class="dragUploadText">Drop image anywhere</div>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted,onBeforeUnmount } from "vue"          
const emits = defineEmits(['dropFile'])
let showDrag = ref(false)
const dropFile = (e: any) => {
    e.preventDefault();
    showDrag.value = false;
    emits('dropFile',e.dataTransfer.files[0],e)
}
onMounted(()=>{
    document.ondragenter = () => {
        showDrag.value = true;
    }
})
onBeforeUnmount(()=>{
    document.ondragenter = null;
})
</script>
<style scoped lang="scss">
.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}
.cover {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}
.fullScreenUpload {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;

    .dragUploadText {
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 20px;
        padding: 14px 20px;
        pointer-events: none;//一定要加这个，关键！
        font-weight: 700;
        font-size: 40px;
        color: #6B57FF;
    }
}

注意：1、两处e.preventDefault()阻止默认事件该加的要加。2、dragenter事件加在document身上，实现全屏检测到拖拽事件。drop事件若遮罩覆盖全屏，可以加在遮罩层上。

第二步：引入组件，接受自定义事件。

    <FullScreenUpload @drop-file="dragUpload" v-if="needDragUpload"></FullScreenUpload>

可根据e.dataTransfer.files判断是拖拽单个文件还是多个文件。v-if可控制什么时候启用/禁用这个全屏拖拽功能。