无法在Safari上的IndexedDB中存储Blob类型 [英] Unable to store Blob types in IndexedDB on Safari

问题描述

我在Safari版本10.1.2上的IndexedDB中存储blob时遇到了问题(在IOS上也遇到了同样的问题).

I'm having issues with storing blobs in IndexedDB on Safari version 10.1.2 (also facing the same issue on IOS).

我正在使用angular2-indexeddb模块包装器，但是-我认为模块本身不是问题.我的代码在Chrome中工作正常，但是当尝试将blob对象放入Safari indexdDb中时，记录始终显示为"null"(请参见FileData字段):

I'm using the angular2-indexeddb module wrapper, however - i don't think it's a problem with the module as such. My code works fine in Chrome, however when attempting to put a blob object in the Safari indexedDb, the record always displays as 'null' (see FileData field):

我尝试了各种不同的Blob文件(音频，视频，html)，它们始终显示为"null".插入此记录时，不会从IndexedDb返回任何(可见)错误.

I have tried a variety of different blob files (audio, video, html) and they always display as 'null'. No (visible) errors are returned from the IndexedDb when inserting this record.

据我所读-Safari应该支持blob.我在想这个问题可能与创建Blob的方式有关?也就是说，也许Safari不喜欢Blob数据?

From what i've read - blobs should be supported in Safari. I'm thinking the problem could be associated with the way the blob is created? i.e. perhaps Safari does not like the blob data?

以下是我的代码示例(我在此处未包含过多内容，因此，如果需要更多信息，请告诉我)

Below is a sample of my code (i haven't included too much here, so please let me know if more information is required):

      // 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);
      });

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

as a side note - i can store this data as an ArrayBuffer in Safari IndexedDB without any issues. The problem is that i then have to convert this back to a blob when i retrieve it from the db (the extra processing power required is not ideal).

非常感谢您的帮助.

推荐答案

所以我设法找到了问题的原因.创建商店时，我引用的索引不正确(主要是因为我在关注在线教程)

So i managed to find the cause of the issue. When creating my store i was referencing an incorrect index (mainly because i was following an online tutorial)

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

我的商店中不存在键路径"id".这是在保存Blob时引起的问题(奇怪的是，没有报告的错误……而且看来没有在chrome上引起问题).

The keypath 'id' does not exist within my store. This was causing the issues when saving the blobs (strangely with no reported error...and it didn't appear to cause issues on chrome).

正确的代码:

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

"FileName"是我的存储对象中的属性的名称.现在，此操作可以解决台式机野生动物园中的问题.因此，这里的课程是确保KeyPath是正确的.

'FileName' is the name of a property within my store object. This now fixes the issue on desktop safari. So the lesson here is to make sure the KeyPath is correct.

但是，我现在面临一个新问题.在IOS Safari上，blob无法持续到indexedDb.我收到以下错误:

However, i now face a new issue. On IOS Safari the blob fails to persist to the indexedDb. I get the following error:

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

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

So it appears that blobs are not supported for indexedDb on IOS Safari (i'm assuming this is a bug). For now i will just store ArrayBuffers instead of blobs.

这篇关于无法在Safari上的IndexedDB中存储Blob类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！