使用JavaScript在textarea显示本地文件内容遇reader.result为null错误求助

嘿，我来帮你搞定这个问题～你遇到的reader.result为null的情况，核心原因是FileReader读取文件是异步操作，你现在的代码逻辑错在了时机上！

为什么会出现null？ #

当你调用reader.readAsText(file)的时候，浏览器会在后台异步读取文件内容，这行代码执行完之后，文件其实还没读完呢！你紧接着就去访问reader.result，这时候它自然是null。只有当FileReader的load事件触发时，才代表文件读取完成，这时候reader.result才有实际的文件内容。

修正后的代码 #

把赋值给textarea的代码移到load事件的回调函数里就可以了，这样只有当文件读取完成后，才会把内容放到textarea中：

<textarea id="queryContent"></textarea>
<input type="file" multiple id="queryInput">
<script>
var input = document.getElementById("queryInput");
input.addEventListener("change", function () {
  // 可选：先清空textarea，避免多次选择文件内容叠加
  document.getElementById("queryContent").innerText = '';
  
  Array.prototype.forEach.call(input.files, function (file) {
    var reader = new FileReader();
    reader.addEventListener("load", function () {
      console.log("File", file.name, "starts with", reader.result.slice(0,20));
      // 把赋值代码移到这里！读取完成后再操作内容
      document.getElementById("queryContent").innerText += reader.result + '\n\n'; // 用换行区分多个文件
    });
    reader.readAsText(file);
    // 删掉原来这里的赋值代码，时机不对会导致result为null
  });
});
</script>

额外小提示 #

如果你选择了多个文件，上面的代码会把所有文件的内容用换行分隔后追加到textarea里。如果你只想显示最后一个选中的文件，把+=改成=就好啦。

内容的提问来源于stack exchange，提问作者Leo