javascript - 显示来自输入标签的图像，无法检索 src 中的数据

Question

这里我有一个在我的网页上显示图像的功能。但问题是当我尝试检索“src”的值时(显然我正在尝试获取以 base64 编码的数据)我得到一个空字符串但我可以在我的网站上看到图像以及 src 的值: Screenshot1

这是我的函数，console.log(reader.result) 的结果是一个空字符串。

HTML :

<input id="avatar" type="file" onchange="previewFile()">
<img id="image" width="200px">

Javascript:

function previewFile() {
      var preview = document.getElementById("image");
      var file    = document.querySelector('input[type=file]').files[0];
      var reader  = new FileReader();

      reader.addEventListener("load", function () {
        preview.src = reader.result;
      }, false);

      if (file) {
        var el = reader.readAsDataURL(file);
      }
        console.log(reader.result);
    }

如何获取数据？

感谢您的帮助。

Answer 1

console.log 输出空白的原因是因为您在图像加载之前调用它。将 console.log 移动到加载函数，您将看到输出。

function previewFile() {

      var preview = document.getElementById("image");
      var file    = document.querySelector('input[type=file]').files[0];
      var reader  = new FileReader();

      reader.addEventListener("load", function () {
        preview.src = reader.result;
        console.log(reader.result);
      }, false);

      if (file) {
        var el = reader.readAsDataURL(file);
      }


}