Javascript Can'；t使用getElemenById+；从输入标记读取同一文件两次；文件阅读器API

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

当用户从文件管理器（

）中选择文件时，将触发一个事件，并将使用FileReaderAPI加载所选文件，当进程完成时（保证此部分将在第一个进程完成后执行），当我想稍后在服务中使用

document.getElementById（“dropzone”）再次读取文件时

它返回

null

下面是输入组件的代码，在本例中，我使用的是react dropzone.js：（因为我通过

getElementById

访问输入元素，所以使用哪个库没有区别）

稍后，当我想使用

document.getElementById（“dropzone”）再次访问该文件时，它返回
null

有没有办法解决这个问题？
经过多次尝试和错误，我发现这是由浏览器的第三方安全扩展之一造成的

确保在开发阶段禁用这些类型的扩展。
经过多次尝试和错误，我发现这是由浏览器的第三方安全扩展之一造成的

确保在开发阶段禁用这些类型的扩展。
为什么要从
文档
读取上传的文件？为什么不从
acceptedFiles
中读取它们呢？因为它位于不同的组件（嵌套组件）中，您可以在组件树中向上或向下传递该文件，而不管它是另一个组件，或者您可以使用状态管理库或类似的东西。是吗？是的，完全正确，但它在两个组件中，这样做不太实际。。。但主要的问题是完全不同的，无论是我的方法还是你的方法，都应该有效。你能创造一个可复制的例子吗？这样就更清楚了？我正试图复制您的问题，但它对我来说很好。为什么要从
文档
读取上载的文件？为什么不从
acceptedFiles
中读取它们呢？因为它位于不同的组件（嵌套组件）中，您可以在组件树中向上或向下传递该文件，而不管它是另一个组件，或者您可以使用状态管理库或类似的东西。是吗？是的，完全正确，但它在两个组件中，这样做不太实际。。。但主要的问题是完全不同的，无论是我的方法还是你的方法，都应该有效。你能创造一个可复制的例子吗？这样就更清楚了？我正试图复制你的问题，但我觉得没问题。
const{
    acceptedFiles
  } = useDropzone({
    accept: "video/*, .mkv",
    onDrop: files => props.handle()
  });

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


    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);