周末给自己站上（ https://whisk-ai.io ）的图片上传做兼容测试，遇到个挺玄学的问题，记录一下。
同一段拖拽上传的代码，Chrome / Firefox 都好好的，Safari 上从访达拖图进 drop 区域，偶发 dataTransfer.files 是空的。控制台一点报错没有，看起来就像用户什么都没拖进来。更烦的是"偶发"——有时候又是正常的，一度怀疑是自己电脑的问题。
加日志排查，drop 事件确实触发了，就是 files 长度为 0 。最后定位下来是两个问题叠一块了：
-
dragover没有preventDefault()。Safari 对这个比 Chrome 严格得多，默认行为没拦住的时候 drop 里的数据是不完整的。Chrome 会宽容地把 files 给你，Safari 直接给你空的。 -
从"照片" App 里直接拖图出来的场景：拖出来的是 promise file ，
dataTransfer.files里根本拿不到，得走dataTransfer.items逐个getAsFile()才行。从访达拖就没这个问题，所以复现起来特别玄学，取决于测试的人从哪拖的图。
两处都改掉之后就稳定了。Safari 拖拽这块的文档少得可怜，网上搜到的答案大多只说 preventDefault 那一半，第二个坑基本没人提。
遇到"Safari 拖拽偶发拿不到文件"的可以照这两条排查，应该能少浪费一个下午。
1
Select Language