本地存储：保存和恢复文件对象的方法指南

Question

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

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

来捕获相机图像。因为我的应用程序希望能离线运行，所以我要如何将File（https://developer.mozilla.org/en-US/docs/Web/API/File）对象保存在本地存储中，以便稍后可以通过ajax上传时检索出来？

我正在从 中获取文件对象...

function gotPhoto(element) { 
     var file = element.files[0];
     //我想在这里将'file'保存到本地存储 :-(
}

我可以将对象转换为字符串并保存，但是当我恢复它时，它不再被识别为File对象，因此无法用于获取文件内容。

我有一种感觉这是无法实现的，但我愿意听取建议。

顺便说一下，我的解决方法是在存储时读取文件内容并将完整内容保存到本地存储中。这样做可以工作，但会快速消耗本地存储空间，因为每个文件都是1MB以上的照片。

Answer 1

将其转换为base64然后保存。

function gotPhoto(element) {
   var file = element.files[0];
   var reader = new FileReader()
   reader.onload = function(base64) {
      localStorage["file"] = base64;
   }
   reader.readAsDataURL(file);
}
// 保存到本地存储

function getPhoto() {
   var base64 = localStorage["file"];
   var base64Parts = base64.split(",");
   var fileFormat = base64Parts[0].split(";")[1];
   var fileContent = base64Parts[1];
   var file = new File([fileContent], "文件名", {type: fileFormat});
   return file;
}
// 获取文件对象

Answer 2

您无法序列化文件API对象。

虽然这并不能解决具体的问题，但是...... 虽然我没有使用过这个，但是如果您查看这篇文章，似乎有一些方法（虽然大多数浏览器尚不支持）可以将离线图像数据存储到某些文件中，以便在用户在线时恢复它们（而不使用localStorage）