我在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(所需的额外处理能力并不理想)。
任何帮助都非常感谢。
4条答案
按热度按时间kg7wmglp1#
所以我设法找到了问题的原因。当创建我的商店时,我引用了一个不正确的索引(主要是因为我遵循了在线教程)
我的商店中不存在路径“id”。这导致了保存blob时的问题(奇怪的是没有报告错误.而且它似乎没有在Chrome上引起问题)。
正确代码:
'FileName'是我的store对象中的属性的名称。这现在修复了桌面Safari上的问题。所以这里的教训是确保KeyPath是正确的。
然而,我现在面临一个新的问题。在IOS Safari上,blob无法持久化到indexedDb。我得到以下错误:
所以看起来IOS Safari上的indexedDb不支持blob(我假设这是一个bug)。现在我只存储ArrayBuffers而不是Blob。
3xiyfsfu2#
是的,我可以确认在iOS Safari 11.2.6版上,IndexedDB不能将Blob存储为值。
我写了一小段代码来存储一个String值,它可以工作。如果我注解掉字符串并用Blob替换它,使用完全相同的代码,Safari会给出一个“未知错误”。
{name:“未知”,消息:“ IndexedDB 中出现未知错误。"}
也许可以尝试在存储Blob之前将其转换为ArrayBuffer。
lo8azlld3#
如果你在iOS/OSX上使用indexedDb仍然有问题,不要使用自动增量,因为这是Safari中的一个错误。
kokeuurv4#
我发现我可以通过在存储之前将
Blob
s转换为base64字符串,然后在检索时再次返回来解决这个问题。这个包很有用https://www.npmjs.com/package/base64-blob