把图片进行Base64编码，实现图片本地存储，无需后端即可查看图片

2023-12-05 07:34:36

你好，我是前端队长Daotin，想要获取更多前端精彩内容，关注我，解锁前端成长新姿势。以下是正文：

今天看到有人在群里提问说，有一个业务场景，用户上传图片后，图片要回显，不依赖后端，刷新浏览器后也会正常显示。确实，在很多项目里都有类似的需求，例如，创建一个相册，上传后能够本地预览图片，而不需要多次请求后端。这个时候，我们就需要用到indexedDB存储技术，通过把图片进行Base64编码，实现图片本地存储。

indexedDB介绍

indexedDB是HTML5中引入的一种非关系型数据库，具有事务性，可存储大量数据，并且能够跨域访问。indexedDB使用对象存储来存储数据，数据可以以键值对的形式存储，也可以以文档的形式存储。

indexedDB存储图片

indexedDB存储图片的步骤如下：

将图片转换为Base64字符串。
打开indexedDB数据库。
创建一个对象存储。
将Base64字符串存储到对象存储中。

indexedDB读取图片

indexedDB读取图片的步骤如下：

打开indexedDB数据库。
打开对象存储。
读取Base64字符串。
将Base64字符串转换为图片。

示例代码

// 将图片转换为Base64字符串
const file = document.getElementById('file').files[0];
const reader = new FileReader();
reader.onload = function() {
  const base64String = reader.result;
  // 将Base64字符串存储到indexedDB中
  const db = indexedDB.open('my-database', 1);
  db.onsuccess = function() {
    const transaction = db.transaction(['images'], 'readwrite');
    const objectStore = transaction.objectStore('images');
    objectStore.put(base64String, 'my-image');
  };
};
reader.readAsDataURL(file);

// 从indexedDB中读取图片
const db = indexedDB.open('my-database', 1);
db.onsuccess = function() {
  const transaction = db.transaction(['images'], 'readonly');
  const objectStore = transaction.objectStore('images');
  objectStore.get('my-image').onsuccess = function(event) {
    const base64String = event.target.result;
    // 将Base64字符串转换为图片
    const image = new Image();
    image.onload = function() {
      document.body.appendChild(image);
    };
    image.src = base64String;
  };
};