HTML：將上傳的照片存儲在LocalStorage中

Question

我正在構建一個Web應用程序，允許用戶使用內置攝像頭拍攝照片並將照片上傳到應用程序，該應用程序將照片存儲在內存中。目前，我正在使用下面的代碼行來捕獲和上傳照片。

<input type="file" accept="image/*"> 

如何將圖像保存在localStorage？有沒有什麼方法可以在HTML中的Javascript中實現這個功能？

Answer 1

嘗試這樣：

const input = document.getElementsByTagName('input')[0]; // or id or whatever selector you want to use 
 

 
input.onchange = (function(e) { 
 
    const file = e.path[0].files[0]; 
 
    const reader = new FileReader(); 
 

 
    reader.readAsDataURL(file); 
 

 
    reader.onload = function() { 
 
    const id = 'blobid' + (new Date()).getTime(); 
 
    const blobCache = tinymce.activeEditor.editorUpload.blobCache; 
 
    const base64 = reader.result.split(',')[1]; 
 
    localStorage.setItem('imageString', base64); 
 
    }; 
 
});