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

Question

目前，我正在开发一个用户选择文件的 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

解决这个问题的任何想法？

Answer 1

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

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