Storan Tempatan: Panduan Cara Menyimpan dan Memulihkan Objek Fail

Question

Saya mempunyai aplikasi menggunakan HTML5/JavaScript yang menggunakan

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

;

Untuk menangkap imej kamera. Memandangkan aplikasi saya mahu berjalan di luar talian, bagaimana saya boleh menyimpan objek Fail (https://developer.mozilla.org/en-US/docs/Web/API/File) dalam storan setempat supaya ia boleh digunakan kemudian Dapatkannya apabila memuat naik melalui ajax?

Saya mendapat objek fail daripada...

fungsi gotPhoto(elemen) {
     var file = element.files[0];
     //Saya mahu menyimpan 'fail' ke storan tempatan di sini :-(
}

Saya boleh menukar objek kepada rentetan dan menyimpannya, tetapi apabila saya memulihkannya, ia tidak lagi dikenali sebagai objek Fail dan oleh itu tidak boleh digunakan untuk mendapatkan kandungan fail.

Saya rasa ini tidak boleh dicapai, tetapi saya terbuka menerima cadangan.

Sebenarnya, penyelesaian saya ialah membaca kandungan fail semasa menyimpan dan menyimpan kandungan lengkap ke storan setempat. Ini berfungsi, tetapi menggunakan ruang storan setempat dengan cepat kerana setiap fail ialah foto 1MB+.

Answer 1

Tukarkannya kepada base64 dan simpan.

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

Anda tidak boleh menyerikan objek API fail.

Walaupun ini tidak menyelesaikan masalah khusus, tetapi... Walaupun saya belum menggunakan ini, jika anda menyemak siaran ini nampaknya terdapat beberapa cara (walaupun belum disokong oleh kebanyakan penyemak imbas) untuk menyimpan data imej luar talian ke dalam beberapa fail supaya ia boleh dipulihkan apabila pengguna dalam talian (tanpa menggunakan localStorage)