Store an image file in IndexedDB

问题

I'm having issues trying to store and image file in IndexedDB local storage, I grab the file object and try and push that into IndexedDB but it seems to throw and error: DOM Exception: DATA_CLONE_ERR (25)

How can I convert the file object, which looks like this (below) to something I can store in indexedDB and retrieve from indexedDB at a later date?

attribute: 32
contentType: "image/png"
displayName: "image1"
displayType: "PNG File"
fileType:    ".png"
name:        "image1.png"
path:        "C:\pictures\image1.png"

回答1:

I believe there might be something going on with your object that makes it look different than the object literal that would be created by the key/value pair you list above. I suggest console.logging the object after it passed through JSON.stringify to make sure it matches one to one with your intentions.

IndexedDB copies objects into the object store using the HTML5 structured clone algorithm. According to the spec, Error and Function objects cannot be cloned and throw a DATA_CLONE_ERR, so look to that as a possible explanation.

回答2:

IndexedDB supports storing blobs in Firefox and Chrome. There is available example on storing images to IndexedDB. The code works fine with the newest version of Chrome and Firefox. Hope it helps.

回答3:

Also note that Chrome (at least through version 23) does not yet support storing blobs in IndexedDB, and will throw the error you described if you're trying store them directly. In the meantime you'll have to use the FileSystem API.