vue3 拖放上传

<template>
<div class="upload-file" @dragover="$event.preventDefault()" @dragenter="$event.preventDefault()"
                @drop="dropEvent">
                <el-icon size="50px">
                    <UploadFilled />
                </el-icon>
                <div>
                    点击或拖动文件上传
                </div>
                <span>
                    支持单个或批量上传。严禁上传包含色情、暴力、反动等相关违法信息的文件。
                </span>
</div>
</template>
<script setup>
function upload(file) {
        var fd = new FormData()
        fd.append('file', file)
        fd.append('groupName', 'fastDeliver')
        uploadFromFile(fd).then(res => {
            if (res.success) {
                state.files.push({ key: res.data, name: file.name })
            }
        })
    }
    function dropEvent(e) {
        e.preventDefault()
        let { files } = e.dataTransfer
        for (let i = 0; i < files.length; i++)
            upload(files[i])


    }
</script>