无法在 Safari 上的 IndexedDB 中存储 Blob 类型

Question

我在 Safari 版本 10.1.2 上的 IndexedDB 中存储 blob 时遇到问题（在 IOS 上也面临同样的问题）。

我正在使用 angular2-indexeddb 模块包装器，但是 - 我不认为这是模块本身的问题。我的代码在 Chrome 中运行良好，但是当尝试将 blob 对象放入 Safari indexedDb 时，记录始终显示为“null”（请参阅 FileData 字段）：

我尝试了各种不同的 blob 文件（音频、视频、html），它们总是显示为“null”。插入此记录时，IndexedDb 不会返回任何（可见）错误。

据我所知 - Safari 应该支持 blob。我认为问题可能与 blob 的创建方式有关？即 Safari 可能不喜欢 blob 数据？

下面是我的代码示例（我在这里没有包含太多内容，所以如果需要更多信息，请告诉我）：

      // create blob:
      const aFileParts = ['<a id="a"><b id="b">foo!</b></a>'];
      const oMyBlob = new Blob(aFileParts, {type : 'text/html'});

      console.log('blob type' + oMyBlob.type); // outputs as 'text/html'

      // initialize my indexeddb store:
      return this.initializeStores().then(() => {

        // add 'oMyBlob' to the FileData data store:
        return this.db.add('FileData',
          { FileName: 'foo', FileData: oMyBlob, FileType: 'audio' }).then(() => {

            // Success
            console.log('added ' + 'foo' + ' to FileData store.');

            // Get the file from the FileData store
            return this.db.getByIndex('FileData', 'FileName', 'foo').then((record) => {
              return Promise.resolve();
            });

          }, (error) => {
            console.log(error);
            this.handleError(error)
            return Promise.reject(error);
          });
      }, (error) => {
        this.handleError(error);
        return Promise.reject(error);
      });

作为旁注 - 我可以将此数据存储为 Safari IndexedDB 中的 ArrayBuffer，没有任何问题。问题是，当我从数据库检索它时，我必须将其转换回 blob（所需的额外处理能力并不理想）。

非常感谢任何帮助。

Answer 1

所以我设法找到了问题的原因。创建商店时，我引用了错误的索引（主要是因为我正在遵循在线教程）

const objectDataStore = evt.currentTarget.result.createObjectStore(
    'FileData', { keyPath: 'id', autoIncrement: true });

我的商店中不存在密钥路径“id”。这导致了保存 blob 时出现问题（奇怪的是没有报告错误......并且它似乎没有在 chrome 上引起问题）。

正确代码：

const objectDataStore = evt.currentTarget.result.createObjectStore(
    'FileData', { keyPath: 'FileName', autoIncrement: true });

“FileName”是我的商店对象中的属性名称。现在，这解决了桌面 Safari 上的问题。所以这里的教训是确保 KeyPath 是正确的。

但是，我现在面临一个新问题。在 IOS Safari 上，blob 无法持久保存到 indexedDb。我收到以下错误：

error: DOMError {name: "UnknownError", message: "An unknown error occurred within Indexed Database."}

因此，IOS Safari 上的 indexedDb 似乎不支持 blob（我假设这是一个错误）。现在我将只存储 ArrayBuffers 而不是 blob。

Answer 2

是的，我可以确认在 iOS Safari 版本 11.2.6 上，IndexedDB 无法将 Blob 存储为值。

我编写了一小段代码来存储字符串值并且它有效。如果我注释掉字符串并将其替换为 Blob，使用完全相同的代码，Safari 会给出“未知错误”

{名称：“UnknownError”，消息：“索引数据库中发生未知错误。”}

也许在存储之前尝试将 Blob 转换为 ArrayBuffer。

Answer 3

如果您在 iOS/OSX 上仍然遇到 indexedDb 问题，请不要使用自动增量，因为这是 Safari 中的一个错误。

Answer 4

我发现我可以通过在存储之前将

Blob

转换为base64字符串来解决这个问题，然后在检索时再次返回。

这个包很有用https://www.npmjs.com/package/base64-blob