V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
iqoo
V2EX  ›  分享创造

免费 CDN 上传大文件

  •  
  •   iqoo · 39 天前 · 2067 次点击
    这是一个创建于 39 天前的主题,其中的信息可能已经有所发展或是发生改变。

    由于很多免费 CDN 对单个文件的体积有限制,因此无法上传大文件。

    不过有个黑科技可以突破这个限制:把大文件切割成多个小文件上传,运行时通过 Service Worker 进行合并,这样在页面看来仍是一个大文件。

    这里使用 NPM 空间演示。将测试文件 bbb.mp4 以每片 10MiB 切割:

    mkdir -p bbb.mp4.parts
    split -b 10MiB -d bbb.mp4 bbb.mp4.parts/
    

    得到 00 、01 、02 、...、33 切片,然后逐个上传到 NPM:

    ...

    最终效果:freecdn.etherdream.com/bbb.mp4

    该文件实际并不存在,而是通过 Service Worker 虚拟出来的。如果用低版本浏览器访问就是 404 。

    拖动视频进度条,程序会根据 Range 请求范围,加载相应的分片。

    (打开控制台调试时不要勾选“禁用缓存”,否则请求可能不走 ServiceWorker )

    事实上 NPM 有多个服务,例如 unpkg.comnpm.elemecdn.com 。因此当一个 CDN 速度慢时,Service Worker 可自动选择另一个,从而增加稳定性。

    更多细节可查看:github.com/EtherDream/freecdn/tree/master/examples/file-split

    13 条回复    2022-05-20 15:44:38 +08:00
    xinyana
        1
    xinyana  
       39 天前 via Android
    虽然这羊毛薅的有点过分,不过有点意思
    learningman
        2
    learningman  
       39 天前 via Android
    挺恶心的,和之前那个拿 npm 分发 jar 包的一丘之貉
    ch2
        3
    ch2  
       39 天前
    ios Safari 下水道了,不支持
    eason1874
        4
    eason1874  
       39 天前   ❤️ 1
    如果是视频切片的话,可以不用在服务端合并,切片后生成一个 m3u8 列表,网页前端播放器会根据播放进度从 m3u8 列表请求不同的文件,这样兼容 100%
    cslive
        5
    cslive  
       39 天前
    记得之前有个用哔哩哔哩 cdn 这么搞的
    mxT52CRuqR6o5
        6
    mxT52CRuqR6o5  
       39 天前 via Android
    @learningman 有啥的啊,我们可最喜欢玩囚徒困境游戏了
    yangg
        7
    yangg  
       39 天前
    你怎么上传到 npm 的?发个版本?
    yaott2020
        8
    yaott2020  
       39 天前 via Android
    拼命薅羊毛的最后都无羊毛可薅
    iqoo
        9
    iqoo  
    OP
       39 天前
    @eason1874 视频是可以的,不过这个支持任意格式的文件。(不知 m3u8 是否兼容所有浏览器,之后细节研究下)
    iqoo
        10
    iqoo  
    OP
       39 天前
    @yangg 每个切片对应一个包版本号,后面那个文档里有 shell 实现,这样比较简单而已。

    当然这里出于简单而已,实际不推荐放 github 和 npm ,这两个空间可以放任意格式的文件,比较珍贵,白嫖可惜了。

    实际最好的方案是放图床,知乎、B 站、简书这些。每个切片加个图片头,使用时跳过头长度就可以。
    ragnaroks
        11
    ragnaroks  
       39 天前   ❤️ 1
    在我上学那会黄网都是这样用正常网站的静态存储放黄片
    byte10
        12
    byte10  
       39 天前
    把大文件切割成多个小文件上传,运行时通过 Service Worker 进行合并,这样在页面看来仍是一个大文件。 我不太明白这个原理,下载文件的时候是在客户端浏览器进行合并 多个 part 吗
    yin1999
        13
    yin1999  
       38 天前 via iPad
    Service worker 是能够拦截网页的请求的,拦截请求以后,由 service worker 而非服务器直接响应请求
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3716 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 04:05 · PVG 12:05 · LAX 21:05 · JFK 00:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.