如何保存和恢复本地存储中的File对象 [英] How do I save and restore a File object in local storage

问题描述

我有一个HTML5 / javscript应用程序，它使用

 < input type =fileaccept =image / * ; capture = cameraonchange =gotPhoto（this）> 
  

来拍摄相机图像。由于我的应用程序想要脱机运行，因此如何保存文件（ https：//开发人员。 mozilla.org/en-US/docs/Web/API/File ）在本地存储中的对象，以便它可以稍后检索ajax上传？

 函数gotPhoto（element）{
 var file = element.files [0]; 
 //我想将'file'保存到本地存储:-( 
} 
  

我可以对该对象进行字符串化并将其保存，但是当我恢复它时，它不再被识别为一个File对象，因此不能用于获取文件内容。

我有一种感觉它不能完成，但我愿意接受建议。

fwiw我的工作是阅读文件内容存储时间并将全部内容保存到本地存储器，这种方式很有效，但由于每个文件都是1MB以上的照片，因此很快就会占用本地存储空间。

您不能序列化文件API对象。

不是它对特定问题有帮助，而是...
虽然我没有使用过这个，如果你看这里 似乎有些方法（尽管大多数浏览器尚未支持）来存储脱机ima ge数据到某些文件，以便在用户在线时（以及不使用本地存储）恢复它们。

I have an HTML5/javscript app which uses

<input type="file" accept="image/*;capture=camera" onchange="gotPhoto(this)">

to capture a camera image. Because my app wants to be runnable offline, how do I save the File (https://developer.mozilla.org/en-US/docs/Web/API/File) object in local storage, such that it can be retrieved later for an ajax upload?

I'm grabbing the file object from the using ...

function gotPhoto(element) { 
     var file = element.files[0];
     //I want to save 'file' to local storage here :-(
}

I can Stringify the object and save it, but when I restore it, it is no longer recognised as a File object, and thus can't be used to grab the file content.

I have a feeling it can't be done, but am open to suggestions.

fwiw My work around is to read the file contents at store time and save the full contents to local storage. This works, but quickly consumes local storage since each file is a 1MB plus photograph.

解决方案

You cannot serialize file API object.

Not that it helps with the specific problem, but ... Although I haven't used this, if you look here it seems that there are ways (althought not supported yet by most browsers) to store the offline image data to some files so as to restore them afterwards when the user is online (and not to use localstorage)

这篇关于如何保存和恢复本地存储中的File对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！