场景：有一个文件上传div区域，要在这个区域实现文件拖拽到此处可以读取文件。
参考：https://blog.csdn.net/qq_43523725/article/details/115162416
https://blog.csdn.net/hjc256/article/details/89021483
被拖拽元素和目标元素的事件：
被拖拽元素：drag-在拖拽的过程中触发
dragend-拖拽完成时
目标元素 ：dragenter- 拖放元素进入目标元素时
dragover - 拖放元素在目标元素上时
dragleave - 拖放元素在目标元素上离开
drop- 被拖放的元素在目标元素上同时鼠标放开触发的事件(注：需要阻止dragover的默认行为才会触发drop事件)
let dropBox = this.$refs.dragArea;
dropBox.addEventListener("dragenter", onDrag, false)
dropBox.addEventListener("dragover", onDrag, false)
dropBox.addEventListener("drop", onDrop, false)
function onDrag(e){
e.preventDefault();
e.stopPropagation();
}
onDrop(e){
e.stopPropagation();
e.preventDefault();
let dt = e.dataTransfer;
let selectedFile = dt.files[0];
}
dataTransfer对象
在所有的拖放事件中都提供了一个数据传输对象dataTransfer，主要是用于在源对象和目标对象之间传递数据。
1、setData(format, data)
设置拖拽事件中要传递的数据，format的参数为数据类型
该方法向dataTransfer中对象中存入数据，接受两个参数，第一个表示要存入的数据类型，共有4种：text/plain、text/html、text/xml、text/uri-list
第二个参数为要存入的数据，例如：event.dataTransfer.setData('text/plain', 'hello world')
2、getData(format)
获得拖拽事件中传递的数据，format参数为数据类型
该方法从dataTransfer对象中读取数据，参数为在setData方法中指定的数据类型，例如：event.dataTransfer.getData('text/plain')
3、clearData()
该方法清空dataTransfer对象中存储的数据，参数可选，为数据类型。若为空，则清空所有数据。
3、setDragImage(element,x,y)
该方法通过img元素来设置拖放图标
element表示拖拽时鼠标下面的图片（通常是image元素，也可以说canvas元素）
x、y分别指示相对于图片的横向和纵向偏移量，相对应鼠标指针。
3、files属性
返回被拖拽的文件列表，是一个FileList对象，有length属性，可通过下标访问。
file对象的例子：
