Question

我是Javascript和IndexedDB的新手。目前我正在为一个简单的实用程序编写代码，该实用程序上传文件并将它们存储在IndexedDB中。然后，用户可以选择查看文件名或文件内容，该文件直接从IndexedDB中的存储文件中读取。

以下是我的javascript代码 -

var db;
var display="";

function indexedDOok(){
return "indexedDB" in window;
}

document.addEventListener("DOMContentLoaded", function(){

if(!indexedDOok())
    return;

var openRequest = indexedDB.open("fileIndex", 1);

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

    if(!thisDB.objectStoreNames.contains("docs")){
        thisDB.createObjectStore("docs", {autoIncrement:true});
        console.log("Database upgrading....");
    }
};

openRequest.onsuccess = function(e){
   db = e.target.result;
   console.log("Database created");
   document.querySelector("#fileSelector").addEventListener("change",    handleFileSelection, false);
   document.querySelector("#displayButton").addEventListener("click", displayContent,                                              false);
   document.querySelector("#getButton").addEventListener("click", getFiles, false);
};

openRequest.onerror = function(e){
    console.log(e.target.result);
};
}, false);

function handleFileSelection(e){
    console.log("Inside file selection handler...");
    var files = e.target.files;
    if(!files){
        console.log("Files selection failed. Select again");
        return;
    }//if
    try{
       var transaction = db.transaction(["docs"],"readwrite"); 
    }catch(ex){
        console.log("Exception in opening transaction, "+ex.message);
        return;
    }//catch
    transaction.onerror = function(evt){
        console.log("transaction.onerror() fired in handleFileSelection(), error code:      "+ (evt.target.error? evt.target.error: evt.target.errorCode));
    };
    transaction.onabort = function(){
        console.log("transaction.onabort() fired in handFileSelection()");
    };
    transaction.oncomplete = function(){
        console.log("transaction.oncomplete() fired in handFileSelection()");
    };

    try{
        var store = transaction.objectStore("docs");

        for(var i=0; i<files.length; i++){
            file = files[i];
            var request = store.put(file);
            request.onsuccess = function(){
                console.log(files.length);
                console.log(file.name+" has been successfully added in table");
            };
            request.onerror = function(evt){
                console.log("Error..."+file.name+" file not added",                                 evt.target.error.name);
            };
        }
    } catch(ex){
        console.log("Transaction and/or put() exception in adding file to     database...."+ ex.message);
        return;
    }

};

function getFiles(){
var transaction = db.transaction(["docs"],"readonly");
var cursor = transaction.objectStore("docs").openCursor();
var s ="";
cursor.onsuccess = function(e){
    var res = e.target.result;
    console.log("Cursor created");
    if(res){
        s+= "<p>"+res.value.name+"</p>";
        res.continue();
    }
    document.querySelector("#content").innerHTML = s;
};
};

function displayContent(){
var transaction = db.transaction(["docs"],"readonly");
var cursor = transaction.objectStore("docs").openCursor();
document.querySelector("#content").innerHTML = "";
cursor.onsuccess = function(e){
    console.log("Inside displayContent() cursor success...");
    var res = e.target.result;
    if(res){
        console.log(res.value.name+ " is loaded");
        readerFile(res.value);
        res.continue();
    }

};
    display="";

};

function readerFile(e){
var reader = new FileReader();
reader.readAsText(e);
reader.onload = function(ex){
    var rawData = reader.result;
   display = document.querySelector("#content");
   display.innerHTML = display.innerHTML + "<h2> "+e.name+ "</h2>";
   display.innerHTML = display.innerHTML + rawData;

};

}

以下是我的index.html

<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="files/dbFile.js"></script>
</head>
<body>
    <input type="file" id="fileSelector" multiple>
    <br><br>
    <button id="displayButton">Display Content</button>
    <button id="getButton">Display Files</button>
    <pre id="content"></pre>

</body>
</html>

它在所有浏览器中成功运行。文件正在上传和存储，并且还会被阅读和显示。但只有在 Chrome 中，它才会出现错误“无法执行'put'on'IDBObjectStore'：对象存储目前不支持blob值。”

当我尝试上传文件时，以下是Chrome控制台的输出 -

Database upgrading....
Database created
Inside file selection handler... dbFile.js:38
Transaction and/or put() exception in adding file to database....Failed to execute 'put' on 'IDBObjectStore': The object store currently does not support blob values. dbFile.js:75
transaction.oncomplete() fired in handFileSelection()

有人可以帮助我。为什么会这样？我做了很多研究，但没有找到任何帮助

为什么铬显示错误＆＃34;对象存储当前不支持blob值＆＃34;什么时候尝试在IndexedDB中存储文件？

0 个答案: