Lokaler Speicher: Eine Anleitung zum Speichern und Wiederherstellen von Dateiobjekten

Question

Ich habe eine Anwendung mit HTML5/JavaScript, die

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

;

Zum Aufnehmen von Kamerabildern. Da meine Anwendung offline ausgeführt werden möchte, wie speichere ich ein Dateiobjekt (https://developer.mozilla.org/en-US/docs/Web/API/File) im lokalen Speicher, damit es später wieder abgerufen werden kann? beim Hochladen über Ajax?

Ich erhalte das Dateiobjekt von...

function gotPhoto(element) {
     var file = element.files[0];
     //Ich möchte 'Datei' hier im lokalen Speicher speichern :-(
}

Ich kann das Objekt in eine Zeichenfolge konvertieren und speichern, aber wenn ich es wiederherstelle, wird es nicht mehr als Dateiobjekt erkannt und kann daher nicht zum Abrufen des Dateiinhalts verwendet werden.

Ich habe das Gefühl, dass dies unerreichbar ist, aber ich bin offen für Vorschläge.

Mein Workaround bestand übrigens darin, den Dateiinhalt beim Speichern zu lesen und den gesamten Inhalt im lokalen Speicher zu speichern. Dies funktioniert, verbraucht jedoch schnell lokalen Speicher, da es sich bei jeder Datei um ein Foto mit mehr als 1 MB handelt.

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）