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);
  };
});