介绍 & lt; input 类型=癴ile",接受=巴枷?*“,捕捉=癱amera", @change=皊electFile"比;
selectFile(事件:任何){
,时间=this.showAlert false ,
,if (event.target.files ,,, event.target.files.length 祝辞,0),{
,,this.isLoading =,真的
,,let 文件:any =, event.target.files [0]
,,let fr: any =, new FileReader ()
,,fr.readAsDataURL(文件)
,,fr.onload =, (imgObj:任何),=祝辞,{
,,,let img: any =, new 图像()
,,,img.src =imgObj.target.result
,,,img.onload =, (e:有),=祝辞,{
,,,,//,这里就可以获取到上传的图片了
,,,,})
,,,}
,,}
,,}
} //,省略上面的代码
fr.onload =, (imgObj:任何),=祝辞,{//,获取到图片文件后
img, let : any =, new 图像()=,img.src imgObj.target.result=,img.onload (e:有),=祝辞,{
压缩才能(img e.path [0] .height, e.path [0] .width, (newImg:任何),=祝辞,{
,,this.imgList.push (newImg)
,,this.isLoading =false//,,,待添加拖拽功能
})才能
,}
}/* *
,*图片压缩
,* @param img 图片对象
,*/export function 压缩(img:任何高度:数量,宽度:号码,回调函数:函数),{
帆布,let : any =, document.createElement(& # 39;帆布# 39;)
背景:,let any =, canvas.getContext (& # 39; 2 d # 39;)
canvas.width =,宽度
canvas.height =,高度
,context.clearRect(0, 0,宽度、高度)
,context.drawImage (img, 0, 0,宽度、高度)
,回调(canvas.toDataURL(“图像/jpeg",, 0.75))
} 压缩(img, e.path [0] .height, e.path [0] .width, (newImg:任何),=祝辞,{
,this.imgList.push (newImg)
,this.isLoading =false
,//在这里给加入方法
,setTimeout((),=祝辞,{
this.addTouchEvent才能(),
,});
})
addTouchEvent () {
,let domList: any =, document.querySelectorAll (& # 39; .show-img& # 39;)
,if (domList), {
let 才能domMoveFlag: boolean =,真的
domList.forEach才能((项目:任何指数:任何),=祝辞,{
,,item.ontouchstart =零
,,item.ontouchmove =零
,,item.ontouchend =零
,,item.ontouchstart =, (startEvent:任何),=祝辞,{
,,,startEvent.preventDefault ()
,,,console.log (startEvent)
,,,this.touchStartTime =, new 日期()
,,,setTimeout((),=祝辞,{,
,,,,if (domMoveFlag), {,,
,,,,,console.log(& # 39;执行元素位置操作过程& # 39;)
,,,,,this.showDeleteArea =,真的
,,,,,let domClient: any =, item.getBoundingClientRect ()
,,,,,console.log (domClient)
,,,,,this.firstPosition =, {
,,,,,,x: startEvent.changedTouches [0] .pageX,
,,,,,,y: startEvent.changedTouches [0] .pageY
,,,,,}
,,,,,item.style.position =, & # 39;固定# 39;
,,,,,item.style.height =, domClient.height +, & # 39; px # 39;
,,,,,item.style.width =, domClient.width +, & # 39; px # 39;
,,,,,item.style.top =, domClient.top +, & # 39; px # 39;
,,,,,item.style.left =, domClient.left +, & # 39; px # 39;
,,,,,item.style.padding =0
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
使用Vue2怎么实现一个图片上,传压缩,拖拽排序等功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
图片上传
图片上传用的是HTML的输入标签实现的。核心就是把获取到的文件通过FileReader转换成图片,代码如下:
图片压缩
图片压缩用的是帆布重绘的方法实现的,具体代码如下:
拖拽排序,拖拽删除
拖拽排序,拖拽到指定位置删除是通过监听触摸事件来实现的。
核心思路:
1,获取到图片dom元素,给图片dom元素添加ontouchstart, ontouchend, ontouchmove方法。
2,在ontouchstart方法中新的一个时间节点,在ontouchend中也新一个时间节点,通过判断两个时间节点之间的时间间隔判断是点击事件还是长按事件。
3, ontouchstart中设置settimeout方法是延时判断是点击方法还是长按方法,如果是长按方法的则获取图片的所在页面中的位置,设置图片的位置为点击屏幕的位置,改变图片的布局方式,在ontouchmove方法中设置图片的位置跟随触摸屏幕的位置变化。
4,移动图片后松开手时,触发ontouchend方法,判断手指离开后,图片所在的位置是否处在删除的区域当中,如果在则删除图片,并且重新渲染图片列表,重新添加联系方法。
如果不在删除的区域中,则进行图片位置排序,排序后还原图片样式。并强制重新渲染图片列表。
代码如下:
