如何从Workbox PWA队列请求体中提取图片

不用手动解析multipart/form-data的边界，直接利用浏览器原生API就能轻松提取图片：

1. 利用Response和FormData原生解析请求体
   浏览器的Response对象可以自动处理multipart/form-data格式的数据，我们只需要把存储的ArrayBuffer请求体转成Blob，再通过Response解析成FormData就能直接拿到图片文件：

import { openDB } from 'idb';

// 获取Workbox存储的离线队列请求
const db = await openDB('workbox-background-sync');
const queuedRequests = await db.getAllFromIndex('requests', 'queueName');

// 遍历处理每个队列请求
for (const req of queuedRequests) {
  // 取出请求体（ArrayBuffer）和请求头
  const requestBody = req.body;
  // 将存储的请求头转为Headers对象（兼容普通对象格式的存储）
  const headers = new Headers(req.headers);
  // 获取包含multipart边界的Content-Type
  const contentType = headers.get('Content-Type');

  // 把ArrayBuffer转为对应格式的Blob
  const bodyBlob = new Blob([requestBody], { type: contentType });
  // 创建Response对象用于解析
  const response = new Response(bodyBlob);

  // 自动解析为FormData
  const formData = await response.formData();
  // 提取表单中名为"image"的文件
  const imageFile = formData.get('image');

  // 生成可用于预览的ObjectURL
  if (imageFile) {
    const imageUrl = URL.createObjectURL(imageFile);
    // 这里可将imageUrl赋值给img标签的src属性展示图片
    // 例如：document.getElementById('offline-image').src = imageUrl;
  }
}

2. 方案优势

• 完全依赖浏览器原生解析逻辑，避免手动写正则处理边界、编码时的各种兼容问题
• 自动适配不同浏览器生成的multipart格式，无需担心边界字符串差异
• 直接拿到原生File对象，后续可直接用于预览、重新上传等操作

内容的提问来源于stack exchange，提问作者Mitriy