• 请不要在回答技术问题时复制粘贴 AI 生成的内容
quanmengli
V2EX  ›  程序员

被 Safari 的拖拽上传坑了一下午: dataTransfer.files 偶发为空

  •  
  •   quanmengli · 1 day ago · 854 views

    周末给自己站上( https://whisk-ai.io )的图片上传做兼容测试,遇到个挺玄学的问题,记录一下。

    同一段拖拽上传的代码,Chrome / Firefox 都好好的,Safari 上从访达拖图进 drop 区域,偶发 dataTransfer.files 是空的。控制台一点报错没有,看起来就像用户什么都没拖进来。更烦的是"偶发"——有时候又是正常的,一度怀疑是自己电脑的问题。

    加日志排查,drop 事件确实触发了,就是 files 长度为 0 。最后定位下来是两个问题叠一块了:

    1. dragover 没有 preventDefault() 。Safari 对这个比 Chrome 严格得多,默认行为没拦住的时候 drop 里的数据是不完整的。Chrome 会宽容地把 files 给你,Safari 直接给你空的。

    2. 从"照片" App 里直接拖图出来的场景:拖出来的是 promise file ,dataTransfer.files 里根本拿不到,得走 dataTransfer.items 逐个 getAsFile() 才行。从访达拖就没这个问题,所以复现起来特别玄学,取决于测试的人从哪拖的图。

    两处都改掉之后就稳定了。Safari 拖拽这块的文档少得可怜,网上搜到的答案大多只说 preventDefault 那一半,第二个坑基本没人提。

    遇到"Safari 拖拽偶发拿不到文件"的可以照这两条排查,应该能少浪费一个下午。

    3 replies    2026-07-08 23:16:57 +08:00
    awanabe
        1
    awanabe  
       1 day ago   ❤️ 2
    感谢楼主给 skill 贡献
    flyqie
        2
    flyqie  
       15h 12m ago via Android
    所以说 safari 不会真成新时代 ie 了吧。。旧的 ie 没了新的 ie 还在,微软玩够了该苹果了?

    以及挺好奇,在规范上第一条 chrome 做的到底是不是合规的,还是说就没有规范纯野生。
    moefishtang
        3
    moefishtang  
       3h 27m ago
    @flyqie (但是 Apple 的移动端设备不开放第三方内核(最主要是不开放 JIT
    所以 WebKit 这依托还得赤 x
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   984 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 18:44 · PVG 02:44 · LAX 11:44 · JFK 14:44
    ♥ Do have faith in what you're doing.