PWA项目从IndexedDB加载图片/视频返回undefined如何解决

你代码返回undefined的本质是IndexedDB所有操作接口都是异步执行的：你在onsuccess、onerror回调里写的return，只会把值返回给回调函数本身，不会传到外层的fetchMedia函数。fetchMedia发起数据库查询请求后会立刻同步执行结束，此时查询操作还没完成，自然拿不到任何返回值。
你手动包一层Blob不生效的原因也很简单：如果存入IndexedDB时本身存的就是Blob/File类型的对象，重复包裹一层Blob反而会破坏原有的文件类型信息，导致浏览器无法识别资源。

推荐把IndexedDB操作封装为Promise形式，配合async/await使用，逻辑清晰也符合前端通用异步编程习惯：

function fetchMedia(id) {
  return new Promise((resolve) => {
    if (!db) {
      resolve("");
      return;
    }
    // 读操作明确指定readonly模式，性能更好
    const transaction = db.transaction(["media"], "readonly");
    const store = transaction.objectStore("media");
    const getReq = store.get(id);

    getReq.onerror = () => {
      console.log("数据库读取失败");
      resolve("");
    };

    getReq.onsuccess = () => {
      const mediaData = getReq.result;
      if (!mediaData) {
        resolve("");
        return;
      }
      // 存储的是Blob/File时直接生成对象URL即可
      const mediaUrl = URL.createObjectURL(mediaData);
      resolve(mediaUrl);
    };

    transaction.onerror = () => {
      console.log("事务执行错误", transaction.error);
      resolve("");
    };
  });
}

调用方法 #

因为函数返回的是Promise，不能同步直接获取返回值，用以下两种方式调用即可：

// 方式1：async/await（推荐）
async function loadMedia(id, el) {
  const url = await fetchMedia(id);
  if (url) {
    el.src = url;
    // 资源加载完成后释放对象URL，避免内存泄漏
    el.onload = () => URL.revokeObjectURL(url);
  } else {
    // 本地无缓存时走网络请求逻辑
    // el.src = 远程资源地址
  }
}

// 方式2：then回调
fetchMedia(1).then(url => {
  if (url) document.getElementById("target-img").src = url;
});

特殊情况处理 #

如果你当初存入IndexedDB的是ArrayBuffer类型的二进制数据而不是Blob/File，才需要手动转Blob，注意必须传入对应资源的正确MIME类型，不能统一用application/octet-stream，否则浏览器无法正常渲染图片/视频：

// 仅当存储内容为ArrayBuffer时使用
// 图片替换为对应MIME，比如image/png、image/jpeg，视频替换为video/mp4等
const mediaBlob = new Blob([mediaData], { type: "image/jpeg" });
const mediaUrl = URL.createObjectURL(mediaBlob);

• 生成的对象URL在资源加载完成后记得调用URL.revokeObjectURL()释放，否则会持续占用内存。
• 只读的数据库操作一定要给transaction指定readonly模式，相比默认的读写模式并发性能更高。
• 不要忘记处理id对应资源不存在的边界情况，避免createObjectURL接收到null/undefined报错。

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