JavaScript 中怎么用 Fetch API 读取响应的 Blob 对象并生成预览-js教程-PHP中文网

fetch api 获取 blob 预览的核心是 response.blob() 解析响应体，url.createobjecturl() 创建临时 url，赋值给 img/video/iframe 等元素；需注意 cors、mime 类型匹配及及时调用 revokeobjecturl 避免内存泄漏。

javascript 中怎么用 fetch api 读取响应的 blob 对象并生成预览

用 Fetch API 获取 Blob 并生成预览，核心是调用 response.blob() 解析响应体，再用 URL.createObjectURL() 创建临时 URL，最后赋给支持 Blob 的元素（如 <img>、<video></video>、<audio></audio> 或 <iframe></iframe>）。

获取 Blob 并显示为图片预览

适用于图片类资源（JPEG、PNG、GIF 等），是最常见场景：

发起 fetch 请求，确保服务器返回的是实际二进制数据（Content-Type 匹配，且未被 CORS 阻止）
用 response.blob() 提取 Blob 对象，它会自动根据响应头推断类型
用 URL.createObjectURL(blob) 生成可直接用于 src 的本地 URL
设置 img.src 后，浏览器自动加载渲染；记得在不需要时调用 URL.revokeObjectURL() 释放内存

示例代码：

fetch('/api/photo.jpg')
  .then(response => {
    if (!response.ok) throw new Error('网络响应失败');
    return response.blob();
  })
  .then(blob => {
    const img = document.getElementById('preview');
    const url = URL.createObjectURL(blob);
    img.src = url;
    // 可选：后续清理（例如页面切换或销毁预览时）
    img.onload = () => URL.revokeObjectURL(url);
  })
  .catch(err => console.error('加载失败:', err));

读取并预览 PDF 或其他文档类型

PDF、TXT、Markdown 等非图像类型可用 <iframe></iframe> 或 <embed></embed> 预览：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

同样用 response.blob() 获取响应体
注意设置正确的 MIME 类型（如 PDF 用 application/pdf），否则某些浏览器可能拒绝渲染
创建 Object URL 后赋给 iframe.src；部分浏览器对 text/plain 不支持直接 iframe 渲染，此时可转为 Data URL 或用 TextDecoder 读取内容后插入 DOM

PDF 示例：

fetch('/report.pdf')
  .then(r => r.blob())
  .then(blob => {
    const iframe = document.getElementById('pdf-preview');
    const url = URL.createObjectURL(new Blob([blob], { type: 'application/pdf' }));
    iframe.src = url;
  });

处理大文件或流式预览（可选优化）

对于较大文件（如视频），可结合 ReadableStream 实现边下载边预览，但需服务端支持流式响应（如 Transfer-Encoding: chunked）：

fetch 返回的 response.body 是 ReadableStream，可配合 stream.pipeTo(writable) 或手动读取
但多数浏览器暂不支持直接将流喂给 <video></video>；更实用的做法仍是等完整 Blob 就绪后再生成 URL
若需进度提示，可用 response.body.getReader() 分块读取并累计，同时更新进度条

常见问题与注意事项

避免踩坑的关键点：

CORS 限制：跨域请求需服务端设置 Access-Control-Allow-Origin，且若带认证（如 cookies），还需 credentials: 'include' 和服务端允许凭证
MIME 类型不匹配：Blob 的 type 字段可能为空或错误，可手动指定（如 new Blob([blob], {type: 'image/webp'})）以确保正确渲染
内存泄漏风险：每个 createObjectURL 都会保留 Blob 引用，务必在不用时调用 revokeObjectURL（尤其在单页应用中频繁切换预览时）
不支持的格式：某些格式（如 WebP 在旧版 Safari）可能无法显示，建议降级处理或提示用户