Question

所以我想在reader.onload函数之外存储文件的dataURl 但是当我将它分配给变量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函数内部打印

我想要一种方法将文件的dataURL存储在reader.onload函数之外，以便我可以将它用于将来使用吗？

Answer 1

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

QuestionID

JS小提琴：https://jsfiddle.net/ncwv0ocL/1/

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

使其更清晰的一个选择可能是做这样的事情：

Question

我喜欢的一件事是代码按照它在页面上显示的顺序执行：）

在此处查看此行动：https://jsfiddle.net/ncwv0ocL/2/

Answer 2

问题是在读者完成后尝试查看结果。解决方案是从我们的读者的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]);

}

因此，我们的流程变为上传文件＆gt;＆gt; 阅读文件＆gt;＆gt; 通知申请

Here is an example of the solution on CodePen

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

2 个答案: