本機儲存：保存和還原文件物件的方法指南

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）