Question

我无法在IndexedDB中保存blob，只能使用blob 如果我保存其他东西（如图像为base64），一切正常但是使用blob，只保存了空对象属性。

来自控制台的屏幕截图：

enter image description here

代码：

//prepared blob...
var openRequest = indexedDB.open("testDB",1);

openRequest.onupgradeneeded = function(e) {
    var thisDB = e.target.result;

    if(!thisDB.objectStoreNames.contains("stash")) {
        thisDB.createObjectStore("stash");
    }
}

openRequest.onsuccess = function(e) {
    db = e.target.result;

    var transaction = db.transaction(["stash"],"readwrite");
    var store = transaction.objectStore("stash");
    var tID = Date.now();

    var obj = {
        bl:blob,
        created:tID
    }
    console.log(obj);
    //add it 
    var request = store.add(obj, tID);
    request.onerror = function(e) {
        console.log("Error",e.target.error.name);
    }
    request.onsuccess = function(e) {
        console.log("success");
    }
}
openRequest.onerror = function(e) {
    //....
}

我也尝试只保存blob（不包装为obj属性），它是一样的我可以将blob保存到HDD，如果我控制台登录我的obj，我得到：

enter image description here

所以我猜，blob是有效的，问题是将它添加到indexedDB。我是blob / indexedDB的新手，可能会做一些noob错误。

有人可以告诉我，我做错了什么？

PS：根本没有错误消息

Answer 1

很老的问题，但现在支持在 IndexedDb 中保存 Blob：

https://developers.google.com/web/updates/2014/07/Blob-support-for-IndexedDB-landed-on-Chrome-Dev

// Create an example Blob object
var blob = new Blob(['blob object'], {type: 'text/plain'});

try {
    var store = db.transaction(['entries'], 'readwrite').objectStore('entries');

    // Store the object  
    var req = store.put(blob, 'blob');
    req.onerror = function(e) {
        console.log(e);
    };
    req.onsuccess = function(event) {
        console.log('Successfully stored a blob as Blob.');
    };
} catch (e) {
    var reader = new FileReader();
    reader.onload = function(event) {
        // After exception, you have to start over from getting transaction.
        var store = db.transaction(['entries'], 'readwrite').objectStore('entries');

        // Obtain DataURL string
        var data = event.target.result;
        var req = store.put(data, 'blob');
        req.onerror = function(e) {
            console.log(e);
        };
        req.onsuccess = function(event) {
            console.log('Successfully stored a blob as String.');
        };
    };
    // Convert Blob into DataURL string
    reader.readAsDataURL(blob);
}

截至发帖时，引用的文档最后更新于：Last updated 2019-03-20 UTC.

Answer 2

您可以将Blob或File对象转换为ArrayBuffer对象或binarystring，然后保存它。从indexedDB读取后将其转换回Blob。

//prepared blob...
blobToBlob2(blob, saveBlob2);

function blobToBlob2(blob, callback){
    var reader = new FileReader();
    reader.readAsArrayBuffer(blob);
    reader.onload = function(e) {
        callback({
            buffer: e.target.result,
            type: blob.type
        });
    };
}

function blob2ToBlob(blob2){
    return new Blob([blob2.buffer],{type:blob2.type});
}

function saveBlob2(blob2){
    //..... code
    var obj = {
        bl:blob2,
        created:tID
    }
    var request = store.add(obj, tID);
    //..... code
}

无法将blob保存到indexedDB

2 个答案: