从reader.onload事件返回变量

Return variable from a reader.onload event

本文关键字：返回 变量 事件 onload reader      更新时间：2023-09-26

我正在通过JavaScript读取一个数组，并将该数组的大小保存在reader.onload事件中。我认为reader.onload函数是在文件上传完成后调用的。CCD_ 3存储该阵列。我希望将该数组保存为变量，以便在其他函数中使用，但是，我尝试初始化一个空数组并使用

slice

函数，但是，它不起作用。控制台返回一个未定义的值。

这是代码

<!DOCTYPE html>
<html>
<head>
    <title> Home Page </title>
</head>
<body>
    <input type="file" id="file" name="files[]" multiple/>
    <output id="list"></output>
    <p id="demo"></p>
    <script>
      function handleFileSelect(evt) { 
        // grab the file that was uploaded which is type File. 
        // evt is the event that was triggered
        // evt.target returns the element that triggered the event 
        // evt.target.files[0] returns the file that was uploaded, type File
        var file = evt.target.files[0]; 
        var myArray = [];
        // instantiate a FileReader object to read/save the file that was uploaded
        var reader = new FileReader();
          // when the load event is fired (the file has finished uploading) this function is called
        reader.onload = function(event) {
          // the result attribute contains an ArrayBuffer representing the file's data. 
          var arrayBuffer = event.target.result;
          myArray = arrayBuffer.slice(0);
          document.getElementById("demo").innerHTML = arrayBuffer.byteLength;
        }
        // read the file and save as an array. Once the read is finished loadend is triggered
        reader.readAsArrayBuffer(file);
        console.log(myArray.byteLength);
      }
      //console.log(myArray.byteLength);
      document.getElementById('file').addEventListener('change', handleFileSelect, false);
    </script>
</body>

onload异步发生。因此，无论什么逻辑依赖于myArray，都需要在onload函数中发生。

    reader.onload = function(event) {
      var arrayBuffer = event.target.result;
      var myArray = arrayBuffer.slice(0);
      document.getElementById("demo").innerHTML = arrayBuffer.byteLength;
      // this needs to happen here
      console.log(myArray.byteLength);
    }
    reader.readAsArrayBuffer(file);

这与经常被问到的问题（关于AJAX/async回调）非常非常相似。如何从异步回调函数返回值？

顺便说一句，这是异步的，因为我们不想在等待读取文件的漫长操作时阻塞整个用户界面。这就是我们在这里使用onload处理程序的原因。

检查此代码。。我想你会明白你的错误是什么

<body>
    <input type="file" id="file" name="files[]" multiple/>
    <output id="list"></output>
    <p id="demo"></p>
    <p id="log"></p>
    <script>
      function onReadFinish(result){
      console.log("Read Finished: "  + result.byteLength);
         document.getElementById("log").innerHTML = "Read Finished: "  + result.byteLength;
      }
      function handleFileSelect(evt) { 
        // grab the file that was uploaded which is type File. 
        // evt is the event that was triggered
        // evt.target returns the element that triggered the event 
        // evt.target.files[0] returns the file that was uploaded, type File
        var file = evt.target.files[0]; 
        var myArray = [];
        // instantiate a FileReader object to read/save the file that was uploaded
        var reader = new FileReader();
          // when the load event is fired (the file has finished uploading) this function is called
        reader.onload = function(event) {
          // the result attribute contains an ArrayBuffer representing the file's data. 
          var arrayBuffer = event.target.result;
          myArray = arrayBuffer.slice(0);
          onReadFinish(myArray);
          document.getElementById("demo").innerHTML = arrayBuffer.byteLength;
        }
        // read the file and save as an array. Once the read is finished loadend is triggered
        reader.readAsArrayBuffer(file);
        
      }
      //console.log(myArray.byteLength);
      document.getElementById('file').addEventListener('change', handleFileSelect, false);
    </script>
</body>

嘿，不确定这是否会对任何人有所帮助，我在angular 11中尝试了这个。由于onload是异步发生的。我们需要使用observable来返回在CCD_ 9块中正在处理的最终对象。

calledFunction(event){
    const file = event.target.files[0];
    reader.readAsArrayBuffer(file);
    return New Observable((subscriber: any)=>{
        reader.onload = function(event) {
          var arrayBuffer = event.target.result;
          var myArray = arrayBuffer.slice(0);
          document.getElementById("demo").innerHTML = arrayBuffer.byteLength;
    
          subscriber.next(myArray) // myArray object will be returned to the calling function
          subscriber.complete(); // Complete the subscriber
        }
    })
}

现在你可以在任何你想要的地方调用这个函数作为服务或函数调用

calledService.calledFunction(event).subscrib(result=>{
    console.log(result)
    // To do your logic based on the result object
})
相关文章：