vue可视化拖拽组件模板,vue3 拖拽
本文主要介绍基于Vue3的全屏拖拽上传组件。其实思路和其他拖拽上传组件基本一样，就是可以指定一个区域进行拖拽，然后读取文件上传。让我们跟着边肖学。
本文主要介绍基于Vue3的全屏拖拽上传组件，分享给大家，具体如下：
学习点
浏览器拖动api
获取请求
vue3
长话短说，html5的拖放api只是拖放排序的一些例子。其实思路和其他拖拽上传组件基本一样，就是可以拖拽一个区域，然后读取文件上传。
先说拖放api，这是html5中新增的api。当draggable=true属性设置为元素时，该元素将支持拖放。
拖动元素事件如下
1.dragon在拖动元素时运行脚本。
2.当拖动操作开始时运行脚本。
3.当拖动操作完成时，ondragend运行脚本。
目标的事件如下：
1.当元素被拖动到有效的拖放目标上时，ondragover执行脚本。
2.当元素被拖动到有效的拖动目标时，ondragenter执行脚本。
3.当元素离开一个有效的拖放目标时，它运行脚本。
4.当拖放被拖动的元素时，ondrop运行脚本。
例如，我们想监控身体的拖拽：
const ele=document . query selector( body )
ele . addevent listener( drag enter ，(e)={
//做点什么
})
而当我们想要停止默认事件时，可以使用e.preventDefault()。
组件
我们先来看看效果。这个时候我只能上传png和jpg。
使用：
上传
接受=。jpg，png，ico //设置文件类型
@onChange=change //文件上传事件
action= 3358 localhost:3001/upload //上传地址
:header=header //上传的标头
自动上传//是否自动上传？
Name=file//上传的字段名
@ on success= on success //callback上传成功
/上传
一开始，当我想获得拖放元素时，我不知怎么地发现，尽管添加了监控事件，但仍然会打开一个新窗口来预览文件，所以我们的第一步是首先禁用所有默认事件。
//禁用默认拖放事件
函数disabled defaultevents(){
const doc=document . document element
doc . addevent listener( drag leave ，(e)=e . prevent default())//拖走
Doc.addeventlistener (drop ，(e)=e . prevent default())//将其关闭
doc . addevent listener( drag enter ，(e)=e . prevent default())//拖入
Doc.addEventListener (dragover ，(e)=e . prevent default())//四处拖动
}
直接获取根元素，防止拖动的默认事件。
第二步是我们将想要监控的事件添加到主体或其他元素中。这里需要注意的是，机身的高度必须是窗口的高度，这样才能全屏拖动。在拖走的时候，我们要判断文件是否被拖出区域。
这里有这样一个判断，
E.target.nodeName===HTML ，用于判断根元素是否为HTML。
E.target===E. ExplicitTarget这是Firefox特有的api，它决定了这两个触发事件的目标是否相同。
(!来自元素
(e.clientX=0
e.clientY=0
e.clientX=window.innerWidth
e.clientY=window.innerHeight))
这用于确定鼠标的当前位置以及它是否仍在该区域中。
//初始化拖入事件
函数init() {
//获取正文元素
const ele=document . query selector( body )
//添加事件
//以后再说吧
ele . addevent listener( drag enter ，()={
显示值=真
})
//这里，判断鼠标拖走。
ele . addevent listener( drag leave ，(e)={
如果(
e.target.nodeName===HTML
e . target===e . explicitoriginaltarget
(!来自元素
(e.clientX=0
e.clientY=0
e.clientX=window.innerWidth
e.clientY=window.innerHeight))
) {
show.value=false
}
})
//拖入
ele.addEventListener(drop ，(e)={
show.value=false
预防默认()
onDrop(e) //拖入处理文件的方法
})
}
第三步是处理拖入的文件，此时接受是我们定义的文件类型，此时我们用电子数据传输文件这个属性可以获得拖入的文件，
然后我们把拖入的文件用过滤器做一个过滤，只保留我们需要的文件类型
检查类型(文件，接受)就是用来判断文件类型的，这一个函数是借鉴了元素用户界面里面的上传组件的筛选，当时我也是写蒙了我
//检查文件类型
函数检查类型（文件，接受=) {
const { type，name }=file
if (accept.length===0)返回真实的
const extension=name.indexOf( . ) -1 ?`.${name.split( . ))).pop()} `:
const baseType=type.replace(/\/).*$/, )
返回接受。拆分(,)。map((type)=type.trim())。过滤器((类型)=类型)。一些((acceptedType)={
如果(/\.$/.测试(acceptedType)) {
返回扩展===acceptedType
}
if (/\/\*$/.测试(acceptedType)) {
返回baseType===接受的类型。替换(/\/\ * $/，)
}
如果(/^[^/)\/[^/]$/。测试(acceptedType)) {
返回类型===acceptedType
}
})
}
这个方法是文件拖入之后的处理，当我们获得需要的文件之后就是根据自动上传来判断一下是否上传
函数onDrop(e) {
const accept=props.accept
const list=[]。切片。呼叫(例如数据传输。文件).过滤器((文件)={
如果（接受){
返回检查类型（文件，接受)
}
返回真实的
})
fileList=list.map((p)={
返回手柄开始(p)
})
//触发事件
onChange()
if (props.autoUpload) {
if (props.action===) {
一个错误()
抛出"需要行动"
返回
}
list.forEach((file)={
帖子(文件)//上传文件
})
}
}
源码如下：
模板
div class= mask v-show= show id= mask
h3拖拽到这里上传/h3
/div
/模板
脚本设置
从“vue”导入{ ref，电抗，onMounted }
//从导入阿贾克斯./ajax
const props=defineProps({
名称：字符串，//上传的字段名
头：{ Object，Number，String }，//上传的文件头
//验证的文件类型，有值的时候只会拖入所有的文件只会保留设置过滤后的文件
接受：{
类型：字符串，
默认值： ,
},
//是否开启自动上传
自动上传：{
类型：布尔型，
默认值：假的，
},
//上传地址
动作：{
类型：字符串，
默认值： # ,
},
})
const emit=define发出([ on error ， onProgress ， onSuccess ， onChange]) //默认发射事件
let show=ref(false) //是否展示遮罩
let fileList=reactive([]) //文件列表
设tempIndex=0 //做一个标记
onMounted(()={
禁用默认事件()
初始化()
})
//初始化拖入事件
函数init() {
const ele=文档。查询选择器(“正文”)
ele。addevent侦听器(拖动回车，()={
显示值=真
}) //拖后放
ele。addevent侦听器( drag leave ，(e)={
如果（
e.target.nodeName===HTML
e。target===e . explicitoriginaltarget
(!来自元素
(e.clientX=0
e.clientY=0
e.clientX=window.innerWidth
e.clientY=window.innerHeight))
) {
show.value=false
}
}) //拖离
ele.addEventListener(drop ，(e)={
show.value=false
预防默认()
奥德罗普
}) //拖进
}
//禁用默认拖拽事件
函数禁用的defaultevents(){
const doc=文档。文档元素
医生。addevent listener( drag leave ，(e)=e.preventDefault()) //拖离
doc.addEventListener(drop ，(e)=e.preventDefault()) //拖后放
医生。addevent listener( drag enter ，(e)=e.preventDefault()) //拖进
doc.addEventListener(dragover ，(e)=e.preventDefault()) //拖来拖去
}
//拖入时的事件
函数onDrop(e) {
const accept=props.accept
const list=[]。切片。呼叫(例如数据传输。文件).过滤器((文件)={
如果（接受){
返回检查类型（文件，接受)
}
返回真实的
})
fileList=list.map((p)={
返回手柄开始(p)
})
onChange()
if (props.autoUpload) {
if (props.action===) {
一个错误()
抛出"需要行动"
返回
}
list.forEach((file)={
发布（文件)
})
}
}
//检查文件类型
函数检查类型（文件，接受=) {
const { type，name }=file
if (accept.length===0)返回真实的
const extension=name.indexOf( . ) -1 ?`.${name.split( . ))).pop()} `:
const baseType=type.replace(/\/).*$/, )
返回接受。拆分(,)。map((type)=type.trim())。过滤器((类型)=类型)。一些((acceptedType)={
如果(/\.$/.测试(acceptedType)) {
返回扩展===acceptedType
}
if (/\/\*$/.测试(acceptedType)) {
返回baseType===接受的类型。替换(/\/\ * $/，)
}
如果(/^[^/)\/[^/]$/。测试(acceptedType)) {
返回类型===acceptedType
}
})
}
//处理文件列表返回值
函数句柄开始（原始文件){
原始文件。uid=日期。now()临时索引
返回{
状态："就绪",
名称：rawFile.name，
大小：rawFile.size，
百分比：0,
uid: rawFile.uid，
raw: rawFile，
}
}
//上传的事件
功能发布（原始文件){
常量选项={
头：props.header，
文件：原始文件，
data: props.data ，
文件名：props.name file ，
动作：道具。动作，
}
上传（选项)。然后((res)={
res.json()
})。然后((json)={
onSuccess(json，rawFile)
})。catch((err)={
错误(错误，原始文件)
})
}
//文件上传方法
功能上传（选项){
常量操作=选项.操作
常量表单数据=新表单数据()
if (option.data) {
Object.keys(option.data).forEach((key)={
formData.append(key，option.data[key])
})
}
formData.append(选项。文件名，选项。文件，选项。文件。名称)
常量标题=新标题()
对于(让项目在标题中){
if(标题。hasownproperty(item)头[item]！==null) {
headers.append(i，option.headers[i])
}
}
返回获取（操作，{
模式："无cors”，
body: formData，
标题：标题，
方法： post ，
})
}
//拖拽进去获取文件列表的事件
函数onChange() {
发出( onChange ，文件列表)
}
//上传中的事件
函数onProgress(e，file) {
发出( onProgress ，e，file，fileList)
}
//上传成功事件
函数onSuccess(res，file) {
发出( onProgress ，res，file，fileList)
}
//上传失败事件
函数onError() {
发出(“onError”)
}
/脚本
样式范围。面具{
top:0；
底部：0;
右：0;
左：0;
位置：固定；
z指数：9999;
不透明度：0.6;
文本对齐：居中；
背景：# 000;
}
h3 {
边距：-0.5 em 0 0；
位置：绝对；
top:50%；
左：0;
右：0;
-WebKit-transform:翻译y(-50%)；
-ms-transform:平移y(-50%)；
transform:平移y(-50%)；
字体大小：40px
颜色：# fff
填充：0;
}
/风格
到此这篇关于基于Vue3的全屏拖拽上传组件的文章就介绍到这了，更多相关Vue3全屏拖拽上传内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。