如何将上传的图像保存到 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 编码。

谁能帮我？

Answer 1

File对象是可克隆的，并且可以保存到索引数据库中，作为其自身的记录或作为其他记录的一部分。

此示例只是将文件数组作为单个记录（键为"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); };
}

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