阅读 31

vue项目实现文件拖拽上传

1、基本代码

<template>
	<div id="drop-area" :class="dropActive ? 'drop-active' : ''">
	</div>
</template>
<script>
export default {
	name:'index',
	data(){
		return {
			dropActive:false
		}
	},
	methods:{
	 	dropEvent(e) {
	        this.dropActive = false
	        e.stopPropagation()
	        e.preventDefault()
	        this.uploadFile(e.dataTransfer.files)
	    },
	    uploadFile (file) { // 渲染上传文件
	      console.log(file[0], 'file')
	      if (file && file.length) {
	        //自行发挥,存本地或上传服务器   
	      }
	    },
	},
	mounted () {
		let dropArea = document.getElementById('drop-area')
	    dropArea.addEventListener('drop', this.dropEvent, false)
	    dropArea.addEventListener('dragleave', (e) => {
	      e.stopPropagation()
	      e.preventDefault()
	      this.dropActive = false
	    })
	    dropArea.addEventListener('dragenter', (e) => {
	      e.stopPropagation()
	      e.preventDefault()
	      this.dropActive = true
	    })
	    dropArea.addEventListener('dragover', (e) => {
	      e.stopPropagation()
	      e.preventDefault()
	      this.dropActive = true
	    })
	}
}
<script>
<style scoped>
#drop-area{
	width:300px;
	height:300px;
	background-color:#fff;
	border:1px solid red;
}
.drop-active{
	background-color: rgba(231,234,246,0.8);
}
</style>
复制代码

监听拖动事件

让vue支持文件拖拽,写在vue的mounted(){}里面,将文件拖动到区域(这里的区域就是id=“drop-area”),监听区域拖动事件 说明: 1、文件第一次进入拖动区时,触发 dragenter 事件 2、文件在拖动区来回拖拽时,不断触发 dragover 事件 3、文件已经在拖动区,并松开鼠标时,触发 drop 事件 4、文件在拖动区来回拖拽时,不断触发dragleave 事件 //拖后放 实现拖动上传,我们只需要关心 drop 事件。不过另外三个事件也需要监听,目的是阻止浏览器默认行为。如果不阻止,那么把文件拖到浏览器时,浏览器就会自动下载这个文件(默认行为),drop 事件触发不出来。

三,处理拖动上传文件 this.dropEvent函数写在项目methods:{}里,监听事件会有文件回调 e.dataTransfer 可以了解到,拖动到浏览器的每个文件都是一个 File 对象。

版权声明

本文为CSDN博主「weixin_44635214」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:blog.csdn.net/weixin_4463…

文章分类
前端
文章标签