基于Vue3文件拖拽上传功能实现
短信预约 -IT技能 免费直播动态提醒
文件上成功能在我们的身边经常遇到，下面小编通过实例代码给大家分享实现方法，效果图如下所示：
<template>
<div :class="['drag', { 'drag-active': active }]" ref="drag">
<p class="drag-title">未选择文件/文件夹</p>
<p class="drag-subtile">
支持拖拽到此区域上传，支持选择多个文件/文件夹
<br />
单个文件夹最大支持512GB
</p>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
const drag = ref(null)
const active = ref(false)
onMounted(() => {
drag.value.addEventListener('drop', handleDrop)
drag.value.addEventListener('dragleave', (e) => {
active.value = false
e.preventDefault()
})
drag.value.addEventListener('dragenter', (e) => {
active.value = true
e.preventDefault()
})
drag.value.addEventListener('dragover', (e) => {
active.value = true
e.preventDefault()
})
})
onBeforeUnmount(() => {
drag.value.removeEventListener('drop', handleDrop)
})
const emit = defineEmits(["file"])
const handleDrop = (e) => {
e.preventDefault()
active.value = false
emit("file", Array.from(e.dataTransfer.files))
}
</script>
<style lang="scss" scoped>
.drag {
height: 220px;
border: 1px dashed #DEDEDE;
border-radius: 4px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
&-active {
border: 1px dashed #2260FF;
}
&-title {
font-size: 14px;
}
&-subtile {
font-size: 12px;
color: #999999;
margin-top: 30px;
text-align: center;
line-height: unset;
}
}
</style>
到此这篇关于基于Vue3文件拖拽上传功能实现的文章就介绍到这了,更多相关vue3拖拽上传内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
