文件上传时如何避免input值变更后每次都新建stream？

你代码的核心问题是重复绑定change事件：

• 每次调用upload()方法时，都会给文件选择元素新增一个change事件监听器，且没有移除旧的监听器
• 你每调用一次upload，后续选择文件时就会多执行一次handleFileInput回调，自然就会创建多个独立的上传流
• 你原本写的清空值逻辑本身是支持重复上传相同文件的，不需要改动这部分功能逻辑

推荐将事件绑定逻辑移到初始化阶段，全局仅绑定一次，示例代码如下（以Angular场景为例）：

// 组件初始化钩子，仅执行一次
ngOnInit(): void {
  const fileinput = document.getElementById('file') as HTMLInputElement;
  // 全局仅绑定一次change事件监听
  fileinput.addEventListener('change', this.handleFileInput.bind(this));
}

public upload(): void {
  const fileinput = document.getElementById('file') as HTMLInputElement;
  // 唤起选择框前清空值，支持重复选择相同文件
  fileinput.value = null;
  fileinput.click();
}

private handleFileInput(event) {
  try {
    const input = event.target as HTMLInputElement;
    // 新增空校验，避免未选择文件时报错
    if (!input.files?.length) return;

    const reader = new FileReader();
    const { objectId } = this.object;
    const file = input.files[0];

    reader.onload = () => {
      this.objectDetailsService
        .upload(file, objectId)
        .subscribe(
          () => { /* 上传成功处理逻辑 */ },
          () => { /* 上传失败处理逻辑 */ },
        );
    };
    reader.readAsArrayBuffer(file);
  } catch (e) {
    console.log(e);
  }
}

如果你没办法提前在初始化阶段绑定事件，也可以每次绑定前先移除旧的监听，实现方式如下：

// 组件内声明变量存储绑定后的处理函数，用于后续移除监听
private fileChangeHandler: EventListener;

public upload(): void {
  const fileinput = document.getElementById('file') as HTMLInputElement;
  // 先移除之前绑定的旧监听，避免重复绑定
  if (this.fileChangeHandler) {
    fileinput.removeEventListener('change', this.fileChangeHandler);
  }
  // 绑定新的监听并存储
  this.fileChangeHandler = this.handleFileInput.bind(this);
  fileinput.addEventListener('change', this.fileChangeHandler);
  
  fileinput.value = null;
  fileinput.click();
}

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