ZBLOG

blob请求的数据是哪里来的

Blob URL 请求的数据来源取决于生成该 Blob 的上下文,以下是可能的来源及详细解释:


1. 数据来源分类

(1) 前端动态生成

  • 用户本地文件
    通过 <input type="file"> 上传的文件会被转为 Blob:

    1. const fileInput = document.querySelector('input[type="file"]');
    2. const blobUrl = URL.createObjectURL(fileInput.files[0]); // 生成 Blob URL

    此时数据来自用户本地磁盘。

  • Canvas/媒体数据
    例如截图或视频帧:

    1. canvas.toBlob(blob => {
    2. const url = URL.createObjectURL(blob); // Canvas 图像数据
    3. });

(2) API 响应(网络请求)

  • Fetch/AJAX 返回的二进制数据
    从服务器获取的二进制响应(如图片、PDF)可转为 Blob:
    1. fetch('https://example.com/image.png')
    2. .then(res => res.blob())
    3. .then(blob => {
    4. const blobUrl = URL.createObjectURL(blob); // 来自服务器
    5. });

(3) Web Worker/IndexedDB

  • Web Worker:子线程生成的二进制数据。
  • IndexedDB:从数据库中读取的 Blob。

2. Blob URL 的生命周期

  • 创建时机:调用 URL.createObjectURL(blob)
  • 存储位置:浏览器内存或临时文件系统(不同浏览器实现不同)。
  • 失效条件
    • 页面关闭(会话结束)。
    • 主动调用 URL.revokeObjectURL(url)

3. HTTP请求时的行为

当浏览器遇到 Blob URL(如 <img src="blob:...">)时:

  1. 不发送网络请求:直接访问本地缓存的 Blob。
  2. 无跨域问题:Blob URL “继承”了创建它的页面的源(Origin),但仅限当前页面访问。

4.调试技巧

  • Chrome DevTools
    • Network → Other →查看 Blob URL “请求”(实际无网络流量)。
    • Memory →检查 Blob对象内存占用。
  • 获取原始数据
  1. //将Blod URl转回Blod对象
  2. fetch(blodUrL)
  3. .then(res=>res.blod())
  4. .then(bLod=>{
  5. //处理原始bLod数据
  6. });

5.安全限制

-无法通过JS直接获取其他页面的B旧bURl内容. -Same-origin策略仍适用.

如果需要进一步分析具体场景中的B旧b来源,可以提供更多上下文代码!


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=23210

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?