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

Posted 2023-05-07

【中文标题】如何将上传的图像保存到 IndexedDB Javascript

【英文标题】：How to save uploaded image to IndexedDB Javascript

【发布时间】：2016-04-01 09:56:55

【问题描述】：

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

<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 编码。

谁能帮助我？

【参考方案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); ;

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