Javascript 如何在reader.onload函数外部存储dataURL

因此，我希望将文件的dataURl存储在reader.onload函数之外 但是当我把它赋给一个变量hello并试图打印它时，它仍然是未定义的

这是密码

<input type='file' accept='image/*' onchange='openFile(event)'><br>
<img id='output'>
<script>
  var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(){
      var dataURL = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;

    };
    reader.readAsDataURL(input.files[0]);
    var hello=reader.result;
    console.log(hello);
    console.log(reader.result);
  };
</script>

但是相同的reader.result可以从on load函数内部打印

---

我想要一种在reader.onload函数之外存储文件的dataURL的方法，这样我就可以在将来使用它了，不管怎样可能？

这是您的脚本，其中有一些日志记录，指出了运行的顺序：

var openFile = function(event) {
    console.log("1. onchange triggered");

    var input = event.target;

    var reader = new FileReader();

    console.log("2. Set handler for onload event");
    reader.onload = function(){
      console.log("5. onload handler called. Now the file is ready");
      var dataURL = reader.result;
      var output = document.getElementById('output');
      console.log("6. Set img src to image");
      output.src = dataURL;

    };
    console.log("3. Start reading file");
    reader.readAsDataURL(input.files[0]);

    console.log("4. Try to look at the file read result, even though the file has not finished being read yet...");
    var hello=reader.result;
    console.log(hello);
    console.log(reader.result);
 };

JS小提琴：

问题是readAsDataURL开始在后台加载文件，而其余代码则在执行。只有在调用onload处理程序后才能获得结果

让它更清楚一点的一个选择可能是这样做：

var openFile = function(event) {
    var input = event.target;
    var reader = new FileReader();
    reader.onload = fileLoaded; // Tell the FileReader to call this function when the file is loaded
    reader.readAsDataURL(input.files[0]);

    // Code here should not depend on the state of the FileReader
 };

var fileLoaded = function (event) {
    var dataURL = event.target.result; // The event parameter gives us the target of the event (the FileReader)
    var output = document.getElementById('output');
    output.src = dataURL;

    // Do your other stuff here with dataURL
    console.log(dataURL);
};

我喜欢的一点是，代码按照它在页面上出现的顺序执行：）

---

查看此处的操作：

问题是在读取器完成后尝试查看结果。解决方案是从阅读器的onload调用一个函数，该函数将提供我们需要的任何功能，即更新输出字段

var openFile = function(e) {

    var input = e.target
    var reader = new FileReader()

    // Our doSomething function would do whatever is needed after we get our value.
    // This allows us to dynamically update anything as opposed to having to check a value to see if it has been updated

    var doSomething = function(dataURL) {

        var output = document.getElementById('output')

        output.src = dataURL

        console.log(dataURL)

    }

    reader.onload = function() {

        // Once we have the data, we pass it to our action that will control what we do with the result

        doSomething(reader.result)

    }

    reader.readAsDataURL(input.files[0]);

}

因此，我们的过程变成了上传文件>读取文件>通知应用程序

---

此处缺少作用域dataURL是匿名函数的本地加载…尝试在其外部进行访问将导致未定义的错误…在顶部声明dataURL并重试这将无济于事，因为设置dataURL的行是在我们尝试使用其值后执行的。