时间戳

首页 > 解决方案 > 如何调用提供 url 的函数，然后使用 FileReader 存储和显示图像

javascript - 如何调用提供 url 的函数，然后使用 FileReader 存储和显示图像

问题描述

我是 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 = "";
}

标签： javascriptdomlocal-storage

解决方案

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

推荐阅读