[{"data":1,"prerenderedAt":141},["ShallowReactive",2],{"page-\u002Fbrowser\u002Fblob":3},{"id":4,"title":5,"body":6,"description":129,"extension":130,"meta":131,"navigation":136,"path":137,"seo":138,"stem":139,"__hash__":140},"content\u002Fbrowser\u002Fblob.md","Blob",{"type":7,"value":8,"toc":123},"minimark",[9,37,40,43,47,56,72,86,111,114,117,120],[10,11,12,13,17,18,22,23,26,27,22,30,22,33,36],"p",{},"Blob 本质上是一个",[14,15,16],"strong",{},"不可变的、类文件的原始数据容器","。它不直接暴露底层字节，只提供 ",[19,20,21],"code",{},"size","、",[19,24,25],{},"type"," 以及读取方法（",[19,28,29],{},"text()",[19,31,32],{},"arrayBuffer()",[19,34,35],{},"stream()"," 等）。",[10,38,39],{},"它的存储不是单一机制，而是由浏览器引擎在内存和磁盘之间动态调度的，以chromium的实现为例，有一个BlobMemoryController专门来管理配额，当Blob数据量小、内存充足，优先放在内存里传输，当数据较大或者内存紧张的时会把Blob数据分页到磁盘，用文件来暂存。",[10,41,42],{},"有一个关键点，渲染进程再把数据交给浏览器进程之前，会临时持有这份数据，如果创建大量的blob而js侧不释放引用的话，渲染进程可能会因为等待传输而内存暴涨甚至可能OOM，所以Blob存在内存还是磁盘取决于数据大小和浏览器调度。但是从开发者的视角来说，他就是一个黑盒的二进制载体。",[44,45,46],"h2",{"id":46},"mime类型设置文件类型",[10,48,49,50],{},"我们一般",[14,51,52,53,55],{},"通过构造函数的 ",[19,54,25],{}," 选项来设置，但这个类型是“声明”的，不是“探测”的。",[10,57,58,61,62,64,65,68,69,71],{},[19,59,60],{},"new Blob([data], { type: 'text\u002Fplain' })"," 里的 ",[19,63,25],{}," 会直接成为 ",[19,66,67],{},"blob.type"," 的值。如果未知，",[19,70,67],{}," 返回空字符串。",[10,73,74,75,78,79,82,83,85],{},"当这个 Blob 被转成 ",[19,76,77],{},"blob:"," URL 并被请求时，浏览器返回的响应头 ",[19,80,81],{},"Content-Type"," 就会取自 ",[19,84,67],{},"。",[10,87,88,89,92,93,96,97,100,101,103,104,107,108,110],{},"需要警惕的是：",[14,90,91],{},"浏览器不会去读取字节流来验证你声明的类型","。你把一个 PNG 文件重命名为 ",[19,94,95],{},".txt"," 再读进来，如果构造时传 ",[19,98,99],{},"type: 'text\u002Fplain'","，",[19,102,67],{}," 就是 ",[19,105,106],{},"text\u002Fplain","，尽管内容其实是 PNG。所以 ",[19,109,67],{}," 只适合作为“提示”，不能当作安全校验依据。",[44,112,113],{"id":113},"用于触发下载和暂存文件",[10,115,116],{},"这两个是blob最常用的两个场景，触发下载是创建blob-> URL.createObject(blob)生成随机URL，创建一个隐藏的a标签，然后设置href为这个url，download属性告诉浏览器这个是要下载的，不是导航，必须revoke，不然blob数据会一直被url引用着无法回收。",[10,118,119],{},"暂存文件是更为宽泛的场景，你可以把任意二进制数据从fetch拿到的response.blob( )比如、用户选择文件得到的flie对象、或者自己拼的字符串ArrayBuffer，包成Blob，然后在内存里持有，切片slice、或者转成URL给img、video预览，它相当于一个浏览器内的临时文件句柄，不需要真正写入磁盘就可以被页面消费。",[10,121,122],{},"继续更新...",{"title":124,"searchDepth":125,"depth":125,"links":126},"",2,[127,128],{"id":46,"depth":125,"text":46},{"id":113,"depth":125,"text":113},"Blob 本质上是一个不可变的、类文件的原始数据容器。它不直接暴露底层字节，只提供 size、type 以及读取方法（text()、arrayBuffer()、stream() 等）。","md",{"date":132,"tags":133},"2026-08-12",[134,135],"browser","blob",true,"\u002Fbrowser\u002Fblob",{"description":129},"browser\u002Fblob","RHN60ep04vSQXfKHXmncbqQ-XP8P9bnanHZNrSrUyTU",1792775383721]