拖拽文件需用 file.text() 或 FileReader 显式读取，files[0].content 为 undefined 因 File 对象无该属性；须过滤类型并阻止 dragover/drop 默认行为；file.text() 异步，逻辑须置于 await 后。
拖拽进来的文件，event.dataTransfer.files 里确实有，但直接读不到内容——必须用 FileReader 或 file.text() 显式读取，否则拿到的只是空壳对象。
drop 事件里为什么 files[0].content 是 undefined？
因为 File 对象根本没有 content 这个属性。浏览器只提供 name、size、type 和读取方法（如 text()、arrayBuffer()），不暴露原始内容字段。
- 常见错误：在
drop回调里写const txt = e.dataTransfer.files[0].content→ 值为undefined - 正确做法：调用
file.text()（返回 Promise）或new FileReader().readAsText(file) -
file.text()自动处理 BOM 和 UTF-8 编码声明，比FileReader更简洁，推荐优先用
如何安全读取拖拽的 HTML/TEXT 文件？
不是所有拖进来的文件都该无条件解析——得先过滤类型，再决定是否执行后续逻辑。
- 检查 MIME 类型：
file.type === "text/html"或file.type.startsWith("text/") - 兜底检查扩展名：
file.name.match(/\.html?$/i)或/.txt$/i - 对非文本类文件（比如
image/png）直接跳过，避免file.text()报错或返回乱码 - 若需解析 HTML 字符串，用
DOMParser，别用innerHTML，防止脚本自动执行
为什么阻止 dragover 和 drop 的默认行为这么关键？
不调 preventDefault()，浏览器会把拖进来的 HTML 文件当成“要打开的网页”，直接导航跳转；TXT 文件则可能触发下载或空白页——你的 JS 根本没机会运行。
- 必须在
dragover和drop两个事件里都调用e.preventDefault() - 只阻止
drop不够：Safari 要求dragover也阻止，否则getData()或files可能为空 - 移动端不支持拖放，这段逻辑天然失效，不用额外兼容
最易被忽略的一点：file.text() 是异步的，你不能在 drop 回调末尾就假设内容已就绪；所有依赖文本内容的逻辑（比如 DOM 解析、正则匹配、渲染）必须放在 await file.text() 之后，或塞进 .then() 里——漏掉这层 await，90% 的“读取失败”问题就出在这儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
