如何調用 function 給出 url，然后使用 FileReader 存儲和顯示圖像

Question

我是 javascript 編碼的新手，我的任務是使用一些預先存在的函數來使用給定的 url 創建圖像項。 我需要讀取圖像，將其存儲在本地存儲中，然后將其顯示在屏幕上。 我也需要添加的唯一功能是處理文件。 我被卡住了，無法讓它顯示圖像。 我收到一條錯誤消息，指出路徑不存在。 以下是我的代碼，對我做錯了什么有任何指導嗎？ 我覺得我很親近，但做一些錯誤的事情。

function addImageEntry(key, url) {
    var imgElement = new Image();
    imgElement.alt = "Photo entry";
    imgElement.src = url;
    addSection(key, imgElement);
}

function makeItem(type, data) { 
  var itemObject = { type: type, data: data }; 
  return JSON.stringify(itemObject);
}

function processFile(event) {
    function addImage(url) {
        var key = "diary" + Date.now();
        addImageEntry(key, url);
        var imgElement = new Image();
        imgElement.src = url;
        var item = makeItem("image", imgElement.src);
        localStorage.setItem(key, item);
    }

    var inputElement = event.target;
    var fileObject = inputElement.files[0];
    var reader = new FileReader();
    reader.addEventListener("load",addImage);
    url = reader.readAsDataURL(fileObject);
    event.target.value = "";
}

Answer 1

url = reader.readAsDataURL(fileObject)不會存儲圖像數據。

它存儲在reader.result中。

使用imgElement.src = reader.result 。

document.querySelector('input[type="file"]').addEventListener('change', processFile)

function processFile(event) {
  var fileObject = event.target.files[0]
  var reader = new FileReader()
  reader.addEventListener('load', addImage)
  reader.readAsDataURL(fileObject)
  
  function addImage() {
    var imgElement = new Image()
    imgElement.src = reader.result
    document.body.append(imgElement)
  }
}

修正：

function addImage(event) {
    // use reader.result is ok too
    localStorage.setItem('myimage', event.target.result)
}

function addImageEntry() {
  var imgElement = new Image()
  imgElement.src = localStorage.getItem('myimage')
  imgElement.style.display = 'block'
  document.body.append(imgElement)
}