如何将上传的图片保存到IndexedDB中的Javascript

Question

我正在使用文件上传控制器浏览图片，选定的图片应该在页面上作为图像缩略图预览。

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

在选择几张图片后，转到下一页并执行某些操作。当从该页面返回时，所有图像预览应该存在。我考虑在转到下一页之前将这些图像保存到IndexedDB中。但我不确定如何编写此情况下的IndexedDB代码。

有没有人能帮助我？

- Nidhish

Answer 1

File对象是可克隆的，并且可以作为记录本身或其他记录的一部分保存到Indexed DB中。

以下示例将一个文件数组作为单个记录（键名为"key"）保存到名为"images"的对象存储中：

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

一个可能的陷阱：HTMLInputElement的files不是一个数组本身，而是一种称为FileList的类似数组的类型。您可以使用例如Array.from(e.files)将其转换为数组，但是FileList可以被克隆（因此可以存储在IDB中），因此这应该“正常工作”。

- Joshua Bell