vue拖拽上传文件,vue拖拽文件
本文主要介绍了基于Vue2的移动终端上图片的上传、压缩、拖拽排序、拖拽删除等功能。本文通过示例代码为您做了非常详细的介绍，对您的学习或工作有一定的参考价值。有需要的朋友可以参考一下。
目录
图片上传图片压缩、拖动、排序、拖动、删除移动终端上的图片上传、压缩、拖动、排序、拖动、删除功能都是通过Vue2实现的。
该公司前一段时间开发的移动H5页面具有上传图像和压缩图像的功能。参考了网上的方法，加上自己摸索的过程，终于实现了这个功能。后来我在家的时候增加了一个长按选择图片的功能，拖拽到指定位置就可以删除了。
Github地址：代码地址
让我们言归正传：
图片上传
利用HTML的输入标签实现图片上传。核心是通过FileReader将获取的文件转换成图片，代码如下：
输入类型= file accept= image/* capture= camera @ change= select file
选择文件(事件：任何){
this.showAlert=false
if(event . target . files event . target . files . length 0){
this.isLoading=true
let file:any=event . target . files[0]
let fr:any=new FileReader()
fr.readAsDataURL(文件)
fr.onload=(imgObj:any)={
let img:any=new Image()
img.src=imgObj.target.result
img.onload=(e:any)={
//这里可以获取上传的图片。
})
}
}
}
}
图片压缩
图像压缩是通过画布重绘实现的，具体代码如下：
//省略上面的代码
fr.onload=(imgObj:any)={
//得到图片文件后
let img:any=new Image()
img.src=imgObj.target.result
img.onload=(e:any)={
Compress(img，e.path[0])。高度，e.path[0]。宽度，(newImg:any)={
this.imgList.push(newImg)
this.isLoading=false
//要添加的拖放功能
})
}
}
/**
*图像压缩
* @param img图片对象
*/
导出函数Compress(img:any，height:number，width:number，callback:Function) {
let canvas:any=document . createelement( canvas )
let context:any=canvas . get context( 2d )
canvas.width=宽度
canvas.height=高度
context.clearRect(0，0，width，height)
context.drawImage(img，0，0，width，height)
callback(canvas . toda taurl( image/JPEG ，0.75))
}
拖拽排序、拖拽删除
通过监测触摸事件实现排序、拖动到指定位置和删除。
核心理念：
1.获取图像dom元素，并向图像dom元素添加ontouchstart、ontouchend和ontouchmove方法。
2.在ontouchstart方法中创建新的时间节点，在OnTouchStart方法中创建新的时间节点。通过判断两个时间节点的时间间隔，可以判断是点击事件还是长按事件。
3.在ontouchstart中设置settimeout方法决定了它是点击方法还是长按方法。如果是长按方法，获取图片在页面上的位置，将图片的位置设置为点击屏幕的位置，改变图片的布局，在ontouchmove方法中将图片的位置设置为跟随触摸屏的位置。
4.移动图片后松开手，触发ontouchend方法，判断手指离开后图片的位置是否在删除区域。如果是，删除图片，重新渲染图片列表，再次添加touch方法。
如果不在删除区域，则对图片位置进行排序，排序后恢复图片风格。并强制重新呈现图片列表。
代码如下：
Compress(img，e.path[0])。高度，e.path[0]。宽度，(newImg:any)={
this.imgList.push(newImg)
this.isLoading=false
//在此添加方法
setTimeout(()={
this.addTouchEvent()
});
})
addTouchEvent(){
let DOM list:any=document . query selector all(。show-img’)
if (domList) {
让domMoveFlag:boolean=true
domList.forEach((item:any，index:any)={
item.ontouchstart=null
item.ontouchmove=null
item.ontouchend=null
项目。ontouchstart=(开始事件：任何)={
startEvent.preventDefault()
console.log(startEvent)
this.touchStartTime=新日期()
setTimeout(()={
if (domMoveFlag) {
console.log(执行元素位置操作过程)
this.showDeleteArea=true
let DOM client:any=item。getboundingclientrect()
console.log(domClient)
this.firstPosition={
x:startEvent.changedTouches[0].pageX，
y:startEvent.changedTouches[0].佩吉
}
item.style.position=fixed
项目。风格。height=DOM客户端。高度像素
项目。风格。width=DOM客户端。宽度像素
项目。风格。top=DOM客户端。顶部像素
项目。风格。left=DOM客户端。左侧像素
item.style.padding=0
item.style.zIndex=9
//添加拖拽事件
项目。ontouchmove=(移动事件：任何)={
//console.log(moveEvent)
项目。风格。top=移动事件。已更改触摸[0].佩吉-这个。第一个位置。y DOM客户端。顶部像素
项目。风格。左=移动事件。已更改触摸[0].pageX-这个。第一个位置。x DOM客户端。左侧像素
}
}
}, 600);
}
项目。ontouchend=(endEvent:any)={
let time:any=new Date()
控制台。日志(时间-这个。触摸开始时间)
如果(时间-这个。touchstarttime=400){
domMoveFlag=false
item.click()
setTimeout(()={
this.addTouchEvent()
});
}否则{
让新项目居中：any=item。getboundingclientrect()
let centerY:any=新项目中心。顶级新项目中心。高度/2
let centex:any=新项目中心。左侧新项目中心。宽度/2
让我们删除DOM:any=document。查询选择器(.删除img’)
let delete area:any=删除DOM。getboundingclientrect()
if (centerY=deleteArea.top) {
let _ img list=JSON。解析(JSON。stringify(这个。img列表))
让当前的img:any=_ img列表。拼接(索引，1)
this.imgList=[]
this.showDeleteArea=false
setTimeout(()={
this.imgList=_imgList
setTimeout(()={
this.addTouchEvent()
});
});
返回
}
this.showDeleteArea=false
//计算所有图片元素所在页面位置
let DOM parent list:any=document。查询selectorall(.img ctn’)
DOM父列表。foreach((DOM parent:any，cindex:any)={
let DOM pos:any=(DOM parent。getboundingclientrect())
如果（
centerY=domPos.top
centerY=domPos.bottom
centerX=domPos.left
centerX=domPos.right
) {
//重新排序
console.log(在目标区域内，重新排序)
let _ img list=JSON。解析(JSON。stringify(这个。img列表))
让当前的img:any=_ img列表。拼接(索引，1)
_imgList.splice(cindex，0，当前值)
this.imgList=[]
setTimeout(()={
this.imgList=_imgList
setTimeout(()={
this.addTouchEvent()
});
});
}
});
//还原样式
项目。风格。position= absolute
item.style.height=100%
item.style.width=100%
item.style.top=0
item.style.left=0
item.style.padding=10px
}
}
})
}
}
至此，图片的上传、压缩、拖拽排序、拖拽删除功能就已经完成了。
到此这篇关于基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能的文章就介绍到这了，更多相关某视频剪辑软件实现图片上传拖拽排序内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。