JavaScript FileReader正在复制onload回调

下面的代码快把我逼疯了。当文件上传输入发生更改时，它会进行拾取，然后通过FileReader获取图像。令人恼火的是，我不知道为什么，那就是不断递增地复制onload事件。因此，第一次选择一个文件时，它会触发onload一次，如果我选择了第二个文件，并且输入了相同的文件，那么onload会触发两次，如果我再次选择一个文件，它会触发3次，类似的

var ele = document.getElementById('photo-upload');
        ele.addEventListener('change',function(e){

            console.log("FLE CHANGED");

            var file = e.target.files[0];
            var fr = new FileReader();
            fr.onload = function(e){
                console.log("FILE READER LOADED");
            }
        }

---

每次单击

，您都在创建新的文件读取器

我已修改了您的代码：

const ele = document.getElementById('photo-upload');
const fr = new FileReader();
fr.onload = function(e){
  console.log("FILE READER LOADED");
}
ele.addEventListener('change',function(e){
  console.log("FLE CHANGED");
  const file = e.target.files[0];
  // load file with using on of fr methods
  // eg.
  fr.readAsArrayBuffer(file);
}

工作示例：

const ele=document.getElementById（'photo-upload'）；
const fr=new FileReader（）；
fr.onload=evt=>{
console.log（evt.target）；
log（“加载了文件读取器”）；
}
ele.addEventListener（'change'，evt=>{
控制台日志（“FLE更改”）；
const file=evt.target.files[0]；
fr.readAsArrayBuffer（文件）；
})

---

每次单击

都会创建新的文件读取器

我已修改了您的代码：

const ele = document.getElementById('photo-upload');
const fr = new FileReader();
fr.onload = function(e){
  console.log("FILE READER LOADED");
}
ele.addEventListener('change',function(e){
  console.log("FLE CHANGED");
  const file = e.target.files[0];
  // load file with using on of fr methods
  // eg.
  fr.readAsArrayBuffer(file);
}

工作示例：

const ele=document.getElementById（'photo-upload'）；
const fr=new FileReader（）；
fr.onload=evt=>{
console.log（evt.target）；
log（“加载了文件读取器”）；
}
ele.addEventListener（'change'，evt=>{
控制台日志（“FLE更改”）；
const file=evt.target.files[0]；
fr.readAsArrayBuffer（文件）；
})

---

共享完整的代码，如果可能的话，您可以创建HTML。代码太长，无法全部共享，它是一个更大项目的一部分。答案如下，但当使用readAsDataURL时，它表示对象处于无效状态共享完整代码中，如果可能，您的HTML将创建。代码太长，无法全部共享，这是一个更大项目的一部分。答案如下，但当使用readAsDataURL时，它表示对象处于无效状态我明白你在这里说的，但当我写道，我认为创建一个新对象实际上就是这样，而不是对所有以前的对象启动evet。我来试试说，这不太对。现在在控制台中，每次上传时我都会看到“对象处于无效状态”。这就是使用readAsDataURL（）将图像作为数据字符串拉入的时候。我编辑了anwser并添加了工作代码段。您做了哪些更改？您没有使用readAsDataURL，这正是我需要的。。无论如何，通过添加代码，我仍然得到：InvalidStateError:对象处于无效状态。readAsDataURL-选择第一个图像并开始尝试第二个或第三个图像后，我已将html部分-

按钮更改为
输入
，正如我在anwser中所述，您可以使用不同的文件阅读器。在我使用的代码片段中，我理解了你们在这里所说的，但当我写下这篇文章时，我有点假设创建一个新对象实际上就是这样，而不是对所有以前的对象进行激发。我来试试说，这不太对。现在在控制台中，每次上传时我都会看到“对象处于无效状态”。这就是使用readAsDataURL（）将图像作为数据字符串拉入的时候。我编辑了anwser并添加了工作代码段。您做了哪些更改？您没有使用readAsDataURL，这正是我需要的。。无论如何，通过添加代码，我仍然得到：InvalidStateError:对象处于无效状态。readAsDataURL-选择第一个图像并开始尝试第二个或第三个图像后，我已将html部分-
按钮更改为
输入
，正如我在anwser中所述，您可以使用不同的文件阅读器。在我使用的代码片段中