vue的拖拽文件


<div ref='select_frame'  ondragstart="return false">//防止跳转

</div>
this.$refs.select_frame.ondragleave = (e) => {
	e.preventDefault()  // 阻止离开时的浏览器默认行为
}
this.$refs.select_frame.ondrop = (e) => {
	e.preventDefault()    // 阻止拖放后的浏览器默认行为
	const data = e.dataTransfer.files[0]  // 获取文件对象
	if (data.length < 1) {
		return  // 检测是否有文件拖拽到页面
	}
	console.log(data)
	this.upload(data)//上传文件的方法
}
this.$refs.select_frame.ondragenter = (e) => {
	e.preventDefault()  // 阻止拖入时的浏览器默认行为
	this.$refs.select_frame.border = '2px dashed red'
}
this.$refs.select_frame.ondragover = (e) => {
	e.preventDefault()    // 阻止拖来拖去的浏览器默认行为
}

  上面的代码就可以实现vue中拖拽文件上传啦~


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM