blob:http:// 的理解

更新于 阅读 3
blob:http:// 的理解

我们在各大视频网站上看到的地址 基本都是以 blob:http(s) 开头的,比如我们在页面生成一个URL对象:

const text = "<div>upyun nodejs上传文件</div>"; const blob = new Blob([text], { type: "text/html" }); URL.createObjectURL(blob); // blob:https://vwood.xyz/70beba1e-b993-48c6-aac7-c83a30204291

用这个地址打开一个页面 可以看见上面的text字符串中的内容。

但是URL对象是有生命周期的,根生成URL对象的页面的生命周期一样,关闭网页链接就不能使用了。

通过URL.revokeObjectURL(url)释放生成的URL对象,当生成的URL对象不使用时应及时释放,这样浏览器就可以释放内存资源。

示例

有时我们编辑图片生成了File对象,会希望预览一下结果,就可以使用上面的方法。 我们在图片上花了一个巨型和椭圆形。保存只有希望预览真实的结果,所以使用URL对象就可以。

const url = URL.createObjectURL(file)

预览效果:

由于 URL.createObjectURL(new Blob()) 每次运行生成的地址都不一样,所以可以用来生成随机字符串,参考文章: URL.createObjectURL(new Blob()).substr(-36)生成uuid