indexdb 存储blob文件

直接存储blob

以下是一个简单的 IndexedDB 封装方法，用于存储和检索 Blob 文件：

class IndexedDBStore {
  constructor(dbName, storeName) {
    this.dbName = dbName;
    this.storeName = storeName;
    this.db = null;
  }

  // 打开数据库
  openDB() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, 1);

      request.onupgradeneeded = event => {
        const db = event.target.result;
        if (!db.objectStoreNames.contains(this.storeName)) {
          db.createObjectStore(this.storeName);
        }
      };

      request.onsuccess = event => {
        this.db = event.target.result;
        resolve(this.db);
      };

      request.onerror = event => {
        reject('Database error: ' + event.target.errorCode);
      };
    });
  }

  // 存储 Blob 文件
  storeBlob(key, blob) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readwrite');
      const store = transaction.objectStore(this.storeName);
      const request = store.put(blob, key);

      request.onsuccess = () => {
        resolve('Blob stored successfully');
      };

      request.onerror = event => {
        reject('Error storing blob: ' + event.target.errorCode);
      };
    });
  }

  // 检索 Blob 文件
  retrieveBlob(key) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readonly');
      const store = transaction.objectStore(this.storeName);
      const request = store.get(key);

      request.onsuccess = event => {
        const blob = event.target.result;
        resolve(blob);
      };

      request.onerror = event => {
        reject('Error retrieving blob: ' + event.target.errorCode);
      };
    });
  }

  // 删除 Blob 文件
  deleteBlob(key) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readwrite');
      const store = transaction.objectStore(this.storeName);
      const request = store.delete(key);

      request.onsuccess = () => {
        resolve('Blob deleted successfully');
      };

      request.onerror = event => {
        reject('Error deleting blob: ' + event.target.errorCode);
      };
    });
  }
}

// 使用示例
const store = new IndexedDBStore('myDatabase', 'myStore');

// 打开数据库
store.openDB().then(() => {
  // 存储一个 Blob 文件
  const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
  store.storeBlob('myBlob', blob).then(message => {
    console.log(message);

    // 检索 Blob 文件
    store.retrieveBlob('myBlob').then(blob => {
      console.log(blob);

      // 删除 Blob 文件
      store.deleteBlob('myBlob').then(message => {
        console.log(message);
      });
    });
  });
});

在这个示例中，我们创建了一个 IndexedDBStore 类，它包含打开数据库、存储 Blob 文件、检索 Blob 文件和删除 Blob 文件的方法。使用这个类，你可以轻松地在 IndexedDB 中存储和检索 Blob 文件。

请注意，IndexedDB 操作是异步的，因此我们使用 Promise 来处理操作的结果。此外，你需要确保在调用存储、检索或删除方法之前已经打开了数据库。

blob转为二进制存储

class IndexedDBStore {
  constructor(dbName, storeName) {
    this.dbName = dbName;
    this.storeName = storeName;
    this.db = null;
  }

  // 打开数据库
  openDB() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, 1);

      request.onupgradeneeded = event => {
        const db = event.target.result;
        if (!db.objectStoreNames.contains(this.storeName)) {
          db.createObjectStore(this.storeName);
        }
      };

      request.onsuccess = event => {
        this.db = event.target.result;
        resolve(this.db);
      };

      request.onerror = event => {
        reject('Database error: ' + event.target.errorCode);
      };
    });
  }

  // 存储 Blob 文件
  storeBlob(key, blob, fileName) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readwrite');
      const store = transaction.objectStore(this.storeName);

      // 将 Blob 转换为二进制数据
      const reader = new FileReader();
      reader.onloadend = () => {
        const data = reader.result;
        const fileData = { data, fileName };
        const request = store.put(fileData, key);

        request.onsuccess = () => {
          resolve('Blob stored successfully');
        };

        request.onerror = event => {
          reject('Error storing blob: ' + event.target.errorCode);
        };
      };
      reader.onerror = event => {
        reject('Error reading blob: ' + event.target.errorCode);
      };
      reader.readAsArrayBuffer(blob);
    });
  }

  // 检索 Blob 文件
  retrieveBlob(key) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readonly');
      const store = transaction.objectStore(this.storeName);
      const request = store.get(key);

      request.onsuccess = event => {
        const fileData = event.target.result;
        if (fileData) {
          // 将二进制数据转换为 Blob
          const blob = new Blob([fileData.data], { type: 'application/octet-stream' });
          resolve({ blob, fileName: fileData.fileName });
        } else {
          resolve(null);
        }
      };

      request.onerror = event => {
        reject('Error retrieving blob: ' + event.target.errorCode);
      };
    });
  }

  // 删除 Blob 文件
  deleteBlob(key) {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(this.storeName, 'readwrite');
      const store = transaction.objectStore(this.storeName);
      const request = store.delete(key);

      request.onsuccess = () => {
        resolve('Blob deleted successfully');
      };

      request.onerror = event => {
        reject('Error deleting blob: ' + event.target.errorCode);
      };
    });
  }
}

// 使用示例
const store = new IndexedDBStore('myDatabase', 'myStore');

// 打开数据库
store.openDB().then(() => {
  // 存储一个 Blob 文件
  const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
  const fileName = 'hello.txt';
  store.storeBlob('myBlob', blob, fileName).then(message => {
    console.log(message);

    // 检索 Blob 文件
    store.retrieveBlob('myBlob').then(fileData => {
      if (fileData) {
        console.log('Blob retrieved successfully');
        console.log('File Name:', fileData.fileName);
        // 你可以在这里使用 fileData.blob
      } else {
        console.log('Blob not found');
      }

      // 删除 Blob 文件
      store.deleteBlob('myBlob').then(message => {
        console.log(message);
      });
    });
  });
});

在这个修改后的示例中，我们使用 FileReader 对象将 Blob 转换为二进制数据（ArrayBuffer），并将文件名和二进制数据一起存储到 IndexedDB 中。在检索时，我们将二进制数据转换回 Blob，并返回文件名和 Blob 对象。

这样，你就可以在 IndexedDB 中存储和检索包含文件名的 Blob 数据了。