So speichern Sie das hochgeladene Bild in IndexedDB Javascript

Question

Verwenden Sie Datei-Upload-Controller zum Durchsuchen von Bildern und die ausgewählten Bilder sollten in der Vorschau der Seite als Miniaturbilder angezeigt werden.

<input type="file" id="imageSelector" multiple="multiple" /> 

var uploadImageCtrl = document.querySelector('#imageSelector'); 
uploadImageCtrl.addEventListener('change', function() { 
    var files = this.files; 
    for(var i=0; i<files.length; i++){ 
     preview(this.files[i]); 
    } 
}, false); 

Nachdem Sie einige Bilder ausgewählt haben, gehen Sie zur nächsten Seite und machen Sie eine Aktion. Und wenn Sie von dieser Seite zurückgehen, sollten alle Vorschaubilder vorhanden sein. Ich dachte daran, diese Bilder in IndexedDB zu speichern, bevor ich auf die nächste Seite gehe. Aber ich bin mir nicht sicher, wie ich in diesem Fall für IndexedDB programmieren soll.

Kann mir jemand helfen?

Answer 1

File Objekte können geklont werden und können in der indizierten Datenbank entweder als eigenständige Datensätze oder als Teil anderer Datensätze gespeichert werden.

Dieses Beispiel speichert nur eine Reihe von Dateien als einen einzelnen Datensatz (Schlüssel ist "key") zu einem Objektspeicher "images" genannt:

// Call with array of images; callback will be called when done. 
function save(array_of_files, callback) { 
    openDB(function(db) { 
    var tx = db.transaction('images', 'readwrite'); 
    tx.objectStore('images').put(array_of_files, 'key'); 
    tx.oncomplete = function() { callback(); }; 
    tx.onabort = function() { console.log(tx.error); }; 
    }); 
} 

// Callback will be called with array of images, or undefined 
// if not previously saved. 
function load(callback) { 
    openDB(function(db) { 
    var tx = db.transaction('images', 'readonly'); 
    var req = tx.objectStore('images').get('key'); 
    req.onsuccess = function() { 
     callback(req.result); 
    }; 
    }); 
} 

function openDB(callback) { 
    var open = indexedDB.open('my_db'); 
    open.onupgradeneeded = function() { 
    var db = open.result; 
    db.createObjectStore('images'); 
    }; 
    open.onsuccess = function() { 
    var db = open.result; 
    callback(db); 
    }; 
    open.onerror = function() { console.log(open.error); }; 
} 

Eine mögliche Gotcha: Htmlinputelement files das ist nicht ein Array selbst, sondern ein Array-artiger Typ namens FileList. Sie können es in ein Array mit z. Array.from(e.files), aber ein FileList kann geklont werden (und daher in IDB gespeichert), so dass dies "einfach funktionieren" sollte.