Vue.js文件上传事件多次触发问题及修复方案

问题复现 #

实现多文件上传功能的初始代码如下：

<input multiple type="file" id="inputFile" ref="fileSelect" @click="uploadfiles"/>

uploadfiles(){     
    'use strict'
  const inputFile = document.getElementById('inputFile')

  console.log(inputFile)
  inputFile!.addEventListener('change',async e => {
    const files  = (e.target as HTMLInputElement).files
    const reader = new FileReader()
    console.log(files)
    console.log(reader)
    // 每次上传重置结果列表
    this.results.splice(0)

    for (const file of files!){
      if(file["type"] == "application/json"){
      this.results.push(await this.readjsonfile(reader, file))}
      else if(file["type"]=="text/csv"){
        this.results.push(await this.readcsvfile(reader, file))
      }
      
      }

    })}

运行异常现象：

• 首次上传文件功能运行正常
• 第二次及以后点击choose files按钮上传新文件时，文件会被重复处理多次，第二次触发2次处理逻辑，点击次数越多重复次数越高

根因分析 #

问题核心是事件绑定逻辑错误：

• 给文件选择框绑定了@click事件，每次点击选择按钮都会执行一次uploadfiles函数
• 每次执行uploadfiles时，都会通过addEventListener给input新增一个change事件监听器，之前绑定的监听器不会被自动销毁
• 选完文件触发change事件时，所有累计绑定的监听器会依次执行，点击次数越多，绑定的监听器越多，重复处理的次数就越高

正确实现 #

Vue框架本身提供了模板事件绑定能力，不需要手动调用原生addEventListener注册事件，直接把处理逻辑绑定到@change事件上即可：文件选择完成后会自动触发回调，且框架会自动管控事件绑定，不会出现重复注册问题。
修复后的模板代码：

<input multiple type="file" id="inputFile" ref="fileSelect" @change="uploadfiles"/>

修复后的逻辑代码：

uploadfiles(event){     
    'use strict'
    console.log(event)
    const fileList = event.target.files
    const reader = new FileReader()
    // 重置结果列表
    this.results=[]
    for(const file of fileList){
      if(file["type"] == "application/json"){
        this.results.push(await this.readjsonfile(reader, file))
      }else if(file["type"]=="text/csv"){
        this.results.push(await this.readcsvfile(reader, file))
      }
    }
    console.log(this.results)
}

额外优化建议 #

• Vue项目中尽量避免手动操作DOM、手动调用addEventListener注册原生事件，框架自带的模板事件绑定会自动处理事件的挂载和卸载，能规避绝大多数重复触发、内存泄漏问题
• 如果需要支持重复选择同一个文件，可以在文件处理逻辑末尾加event.target.value = ''清空输入框值，否则选择相同文件不会触发change事件
• 多文件异步读取场景下，建议为每个文件单独创建FileReader实例，不要全局复用同一个实例，避免异步读取时出现状态错乱

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