必须在dragover事件中调用event.preventdefault()和event.stoppropagation()才能触发drop事件；drop中通过event.datatransfer.files获取文件并用formdata.append逐个添加，配合fetch异步提交。
拖拽区域怎么监听 dragover 和 drop 事件
浏览器默认会阻止 dragover 和 drop 的默认行为，不加处理的话，文件拖进来直接就打开或下载了，根本不会触发 drop。必须在 dragover 里调用 event.preventDefault()，同时建议加上 event.stopPropagation() 避免事件冒泡干扰。
常见错误是只在 drop 里 preventDefault，这没用——dragover 被拦住，压根到不了 drop。
-
dragover只需阻止默认行为，不需要读取文件，性能开销最小 -
drop里用event.dataTransfer.files拿FileList，不是event.target.files - 记得检查
files.length > 0，空拖放（比如拖文本）会导致files为空数组
如何把拖入的文件转成 FormData 并提交
不能直接把 FileList 塞进 FormData 构造函数；得遍历添加。如果表单有其他字段（如 description），也得一并 append 进去，否则后端收不到。
注意：不要用 form.submit() 提交——它会触发表单完整跳转，而拖拽上传通常要走 fetch 或 XMLHttpRequest 异步提交。
- 用
new FormData()实例，再循环files调用.append('file', file) - 若允许多文件，后端通常期望多个同名字段（如
file），而不是一个数组字段 - 若需保留原始文件名，直接传
file即可；改名则用new File([file], 'newname.jpg') - 提交时
fetch(url, { method: 'POST', body: formData })—— 不要设Content-Type，让浏览器自动设为multipart/form-data并带上正确 boundary
为什么 fetch 后端收不到文件？常见漏点
最常踩的坑是后端没配好 multipart 解析，但前端也有几个硬伤：
- 忘了在
drop事件里preventDefault()，导致页面跳转或打开文件 -
FormDataappend 时 key 名和后端约定的字段名不一致（比如前端用'files'，后端只认'file'） - 用
JSON.stringify(formData)或手动设Content-Type: application/json，这会让二进制文件变成 [object File] 字符串 - 没处理
input[type="file"]和拖拽共存时的重复绑定，导致多次监听同一事件
要不要兼容 input[type="file"] 点选？怎么统一逻辑
应该要。用户习惯不同，拖拽不是唯一路径。关键是把文件获取逻辑抽出来，让两个入口都调同一个处理函数。
别写两套 handleDrop(files) 和 handleInput(e)，而是统一用 handleFiles(e.dataTransfer?.files || e.target?.files)。
-
<input type="file" multiple>的change事件中，取e.target.files - 拖拽的
drop事件中，取e.dataTransfer.files - 两者返回的都是
FileList，类型一致，可直接复用后续上传逻辑 - 如果还要支持粘贴图片（
paste事件），也要走同一入口，从e.clipboardData.items过滤kind === 'file'
拖拽本身不难，难的是边界情况：空拖放、跨窗口拖入、非文件拖入、连续多次拖拽未清状态……这些不处理，用户第一次用就失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
