Question

我正在编写一个函数，它从表单输入的文件中获取图像，并使我能够将其放在localstorage中。我写的功能是为了达到这个目的：

function getImage() {
    var pic = document.getElementById("image").files[0];
    var imgUrl;
    var reader = new FileReader();  
    reader.onload = function(e) {
      var imgURL = reader.result;
      saveDataToLocalStorage(imgURL);
      return imgUrl;
    }
}

然后在另一个函数中，我调用此函数并创建一个JSON条目，其中我存储来自其他表单输入（包括图像）的值。它看起来像这样：

    var imgUrl = getImage();

    // Create new JSON entry
    var json_entry = {'title': titleField.val(),
                        'image': imgUrl,
                        'content': contentField.val(),
                        'location': location};

可悲的是imgUrl的值未定义。没有控制台错误。我究竟做错了什么？我该如何解决这个问题？

Answer 1

老实说，我对FileReader对象了解不多，但我只能看到你的JS（至少）有一件事是关闭的：

var imgUrl = getImage();

你的getImage函数没有返回任何内容;所以imgUrl肯定会高于undefined。

如果您想对result的{{1}}属性执行某些操作，则需要执行此操作，因为您正在处理（异步）FileReader事件：

onload

然后：

function getImage(callback) {
    // What are you doing with this?
    var pic = document.getElementById("image").files[0];

    var reader = new FileReader();  
    reader.onload = function(e) {
      var imgURL = reader.result;
      saveDataToLocalStorage(imgURL);

      // Note the difference here: rather than return from the event handler
      // (which effectively does nothing) we pass the result to a callback.
      callback(imgUrl);
    }

    // I assume you actually need to load something with the FileReader?
}

Answer 2

看起来您忘记将阅读器设置为readAsDataUrl。可能该值将以undefined的形式返回，因为localStorage本身并不知道如何序列化二进制数据。将阅读器设置为readAsDataUrl更改reader.result onload。

var reader = new FileReader();  
reader.onload = function(e) {
  var imgURL = reader.result;
  saveDataToLocalStorage(imgURL);
  callback(imgUrl);
};
// add this line
reader.readAsDataURL(pic);

查看this文章，尤其是标题为阅读文件的部分。请注意，在链接示例中，作者使用e.target.result代替reader.result。应该是相同的值。

localstorage函数中的图像不起作用

2 个答案: