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

4c8rllxm  于 2023-10-14  发布在  IndexedDB
关注(0)|答案(4)|浏览(182)

我在Safari 10.1.2版的IndexedDB中存储blob时遇到了问题(在IOS上也遇到了同样的问题)。
我使用的是angular2-indexeddb模块 Package 器,但是-我不认为这是模块本身的问题。我的代码在Chrome中运行良好,但是当试图将blob对象放入Safari indexedDb中时,记录总是显示为“null”(参见FileData字段):

我试过各种不同的blob文件(音频,视频,html),它们总是显示为“null”。插入此记录时,IndexedDb不会返回任何(可见)错误。
从我所读到的-斑点应该在Safari中支持。我在想问题可能与这个斑点的产生方式有关?也就是说,也许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(所需的额外处理能力并不理想)。
任何帮助都非常感谢。

kg7wmglp

kg7wmglp1#

所以我设法找到了问题的原因。当创建我的商店时,我引用了一个不正确的索引(主要是因为我遵循了在线教程)

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'是我的store对象中的属性的名称。这现在修复了桌面Safari上的问题。所以这里的教训是确保KeyPath是正确的。
然而,我现在面临一个新的问题。在IOS Safari上,blob无法持久化到indexedDb。我得到以下错误:

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

所以看起来IOS Safari上的indexedDb不支持blob(我假设这是一个bug)。现在我只存储ArrayBuffers而不是Blob。

3xiyfsfu

3xiyfsfu2#

是的,我可以确认在iOS Safari 11.2.6版上,IndexedDB不能将Blob存储为值。
我写了一小段代码来存储一个String值,它可以工作。如果我注解掉字符串并用Blob替换它,使用完全相同的代码,Safari会给出一个“未知错误”。
{name:“未知”,消息:“ IndexedDB 中出现未知错误。"}
也许可以尝试在存储Blob之前将其转换为ArrayBuffer。

lo8azlld

lo8azlld3#

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

kokeuurv

kokeuurv4#

我发现我可以通过在存储之前将Blob s转换为base64字符串,然后在检索时再次返回来解决这个问题。
这个包很有用https://www.npmjs.com/package/base64-blob

相关问题