无法使用 getElemenById + FileReader API 从 Input 标签中读取同一个文件两次答案

【问题标题】：Can't read the same file from an Input tag twice using getElemenById + FileReader API无法使用 getElemenById + FileReader API 从 Input 标签中读取同一个文件两次
【发布时间】：2026-02-21 16:30:02
【问题描述】：

目前，我正在开发一个用户选择文件的 WebService，我们正在用户的浏览器上进行一些预处理，稍后我们会将文件发送到服务器。

当用户从文件管理器(<input type=file id="dropzone"/>) 中选择一个文件时，将触发一个事件并使用 FileReaderAPI 加载选定的文件，当该过程完成时（保证该部分将在第一个过程完成后执行）当我想稍后在服务中使用document.getElementById("dropzone") 再次读取该文件，它返回null。

这里是输入组件的代码，在这种情况下，我使用的是 react-dropzone.js:(因为我通过 getElementById 访问输入元素，所以使用哪个库没有区别)

const{
    acceptedFiles
  } = useDropzone({
    accept: "video/*, .mkv",
    onDrop: files => props.handle()
  });

return(<div> <input {...getInputProps()} id="dropzone"/> </div>) ;

props.handle(files) 指的是要进行文件处理的函数

以下是handle() 函数的一部分，它处理选定的文件，并在用户选择文件时触发。

    var upFile = document.getElementById("dropzone");
    var file = upFile.files[0];

 //Original function iterate over all slices
      var r = new FileReader();
      var blob = file.slice(offset, length + offset);
      r.onload = processChunk;
      r.readAsArrayBuffer(blob);

稍后当我想再次使用document.getElementById("dropzone") 访问该文件时，它会返回null

有什么办法解决这个问题吗？

【问题讨论】：

为什么要从document读取上传的文件？为什么不从acceptedFiles 阅读它们？
因为它在不同的组件（嵌套组件）中
您可以通过组件树向上或向下传递文件，如果它是另一个组件都没有关系，或者您可以使用状态管理库或类似的东西。对吗？
是的，这是完全正确的，但它是在 2 个组件中，这样做不是很实用……但主要问题是完全不同的，无论我的方法还是你的方法，都应该有效
你能创建一个可重现的例子吗？这样就更清楚了？我正在尝试复制您的问题，但对我来说效果很好。

标签： javascript html reactjs input

【解决方案1】：

经过多次试验和错误，我发现这是由浏览器的第 3 方安全扩展之一引起的。

确保在开发阶段禁用这些类型的扩展。

【讨论】：