datatransfer.files为空主因是未在dragover阶段调用event.preventdefault()，而非跨域限制；需目标页同步阻止默认行为以启用drop，跨域iframe须内部监听后postmessage传文件内容。
拖拽文件时 DataTransfer.files 为空的常见原因
跨域环境下拖拽文件，DataTransfer.files 为空，往往不是因为“跨域禁止”，而是因为目标页面没正确监听 dragover 并调用 event.preventDefault()。浏览器默认会阻止跨文档（含跨域 iframe 或不同源窗口）的 drop 行为，不阻止就根本不会触发 drop，自然拿不到文件。
关键点在于：即使两个页面同属一个父域但子域不同（如 a.example.com 和 b.example.com），或完全无关域名，只要拖拽源是本地文件系统（桌面拖进浏览器），DataTransfer.files 就仍可读——前提是目标页面在 dragover 阶段明确声明接受拖拽。
-
dragover事件必须绑定在能接收 drop 的容器上（比如编辑器根<div>），且必须同步调用 <code>event.preventDefault() - 仅靠
drop事件里preventDefault不够，浏览器已在dragover时决定是否放行 - 如果目标是 iframe，需确保该 iframe 已加载完成、且其 contentWindow 可访问（同源才可直接操作；跨域 iframe 无法从外层 JS 绑定其内部事件）
- iframe 内部监听
drop，读取event.dataTransfer.files，对每个File调用file.arrayBuffer()或file.text()（根据类型判断），再将二进制或文本内容转为 base64 或Uint8Array后通过postMessage发出 - 主站监听
message，校验event.origin，只接收可信来源消息 - 避免直接传递
file.name或file.type外的原始属性——部分浏览器在跨域上下文中会屏蔽这些字段（尤其是 Safari），应由 iframe 内部读取后一并传出 - 不要尝试用
dataTransfer.items+getAsFile()替代files，它在跨 iframe 场景下兼容性更差，Chrome 95+ 已逐步弃用items的文件访问能力 - 务必在
drop回调内立即启动读取，不要用setTimeout延迟、也不要等用户点击按钮再读 - 如果编辑器支持粘贴图片（
paste事件中clipboardData.items可能含image/png），注意它和拖拽的DataTransfer是两套机制，不能混用判断逻辑 - 某些富文本编辑器（如 Quill、Tiptap）会劫持
drop事件并阻止冒泡，你需要在其配置中关闭默认处理（如设置disableDefaultDropHandler: true），否则你的监听器收不到事件 - 测试时用真实文件拖拽，别只靠
new DataTransfer()模拟——后者在跨域/iframe 场景下行为与真实拖拽差异极大 - 改用箭头函数：
reader.onload = () => { console.log(reader.result); }，或提前缓存const self = this - 更推荐 Promise 化封装：
const readFile = file => new Promise(r => { const fr = new FileReader(); fr.onload = () => r(fr.result); fr.readAsDataURL(file); });，然后await readFile(file)，语义清晰且无this问题 - 注意
readAsDataURL会生成 base64 字符串，体积比原文件大 33%，上传前建议降级为arrayBuffer()+ 分片上传
如何在跨域 iframe 编辑器中安全获取拖入文件
若你的 HTML 编辑器运行在跨域 iframe 中（例如嵌入第三方 CMS），主站无法直接监听其内部 dragover，此时不能依赖外部脚本注入事件监听器。唯一可行路径是：由 iframe 内部自身完成事件注册，并通过 window.postMessage 向外传递文件信息（注意：不能传 File 对象本身，因其不可序列化）。
实操建议：
Drop 事件中读取文件内容的时机与陷阱
drop 事件触发时，DataTransfer.files 是可用的，但文件内容尚未自动加载。你必须显式调用 FileReader 或 file.arrayBuffer() 等异步方法读取——而这些操作不能在事件处理函数退出后才开始，否则可能因浏览器释放引用导致失败（尤其在移动端或低内存环境）。
为什么 FileReader onload 里 this 指向丢失？
这是实际编码中最容易卡住的一点：在 drop 事件中创建 FileReader，然后写 reader.onload = function() { console.log(this.result); }，结果 this 是 FileReader 实例而非预期的编辑器上下文，导致无法调用 this.insertImage() 这类方法。
真正麻烦的从来不是 API 调用本身，而是跨域场景下事件流被截断、对象生命周期错位、以及不同浏览器对 DataTransfer 字段的差异化裁剪——这些细节不会报错，只会让文件“悄无声息地消失”。
