关于DragEvent接口与事件 复盘拖放&上传完整过程

复盘 ：拖放&上传 文件的过程

完整过程(简述)：
实现交互过程使用express框架–脚手架(基础代码见底部)
①开始拖动文件触发DragEvent(5种事件)
②将文件放到页面内指定区域(松开鼠标左键，2种事件)，触发dropover事件和drop事件
③文件保存在FileList中
④通过FromData传输文件到服务器
⑤服务器根据自定义存储规则保存文件

详细过程(举例)：

拖放过程指定区域：id为region的div

整个过程必要的两个事件dragover和drop
当文件拖动到页面指定区域时触发dragover事件
//1.获取目标对象

let regionEle = document.getElementById("region");

//2.1给目标对象添加事件dragover

regionEle.addEventListener("/dragover",(event)=>{
   
	event.preventDefault();
});

//2.2给目标对象添加drop事件

regionEle.addEventListener("/drop",(event)=>{
   
	event.preventDefault();
	event.stopPropagation();
});

//3.FileList存储文件

regionEle.addEventListener("/drop",(event)=>{
   
	event.preventDefault();
	event.stopPropagation();
	//声明新变量存储dataTransfer中的数据
	let dt = event.dataTransfer;
	//将文件存在FileList中
	let FileList = dt.files;
});

//4.通过formData传输数据

regionEle.addEventListener("/drop",(event)=>{
   
	event.preventDefault();
	event.stopPropagation();
	//声明新变量存储dataTransfer中的数据
	let dt = event.dataTransfer;
	//将文件存在FileList中
	let fileList = dt.files;
	//将拖进的文件循环遍历传输给服务器
	for(let n = 0;n<fileList.length;n++){
   
		formData.append("upload",fileList.item(n));
	}
});

//4.axios传输

regionEle.addEventListener("/drop",(event)=>{
   
	event.preventDefault();
	event.stopPropagation();
	//声明新变量存储dataTransfer中的数据
	let dt = event.dataTransfer