blob:http:// 的理解
更新于 阅读 7 次
我们在各大视频网站上看到的地址 基本都是以 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