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中拖拽文件上傳啦～