Question

有人可以告诉我为什么在正确打印所有File属性时为什么FileReader.readAsArrayBuffer（）在以下代码中返回undefined

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
 <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {

         $( "#form" ).submit(function( event ) {
              event.preventDefault();   
             var filevar=document.getElementById("file").files[0];   
             var reader=new  FileReader() ;
             console.log(filevar.name);
             console.log(filevar.size);
             console.log(filevar.type);
             var file_contents= reader.readAsArrayBuffer(filevar);
             console.log(file_contents);      

        });   
    });

    </script>
<body>
<form   action="" method="POST" id="form">
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname"><br>
 Choose File : <input name="myFile" type="file" id="file">

<input type="submit" id="submit">
</form>
</body>

</html>

Answer 1

读取文件是异步的。你必须等到它完成。

var reader = new FileReader();
reader.onload = function(e){
    let value = e.value;  // alternatively reader.result
    // do stuff with your value
};
reader.readAsArrayBuffer(filevar);

.readAsArrayBuffer不会返回任何内容。

或者，您可以为此设置异步功能，因此您不必使用回调：

function readFile(file){
    return new Promise((res, rej) => {
        // create file reader
        let reader = new FileReader();
        
        // register event listeners
        reader.addEventListener("loadend", e => res(e.target.result));
        reader.addEventListener("error", rej);
        
        // read file
        reader.readAsArrayBuffer(file);
    });
}

async function main(file){
    // read file into typed array
    let fileArrayBuffer = new Uint8Array(await readFile(file));
    // do things with it
    console.log(fileArrayBuffer);
}

// register event listener for input
document.querySelector("input[type=file]").addEventListener("change", e => {
    let file = e.target.files[0];
    main(file);
});

<input type="file">

Answer 2

FileReader实际上是一个异步函数。有些文件比其他文件大，所以你不想锁定主线程。

如果要查看文件的结果。您应该将回调添加回阅读器的onload功能。

var reader = new FileReader();
reader.onload = function(completionEvent) { 
  console.log(completionEvent); 
  // Set the result to whatever you need it as
}

reader.readAsArrayBuffer(filevar);

FileReader为File对象返回undefined

2 个答案: