Vue+Rails开发中input的addEventListener change事件不触发问题

核心问题定位方向 #

• 手动DOM绑定事件的写法本身不稳定
  Vue基于虚拟DOM重渲染的机制，会导致你在mounted里通过querySelector拿到的DOM元素，后续很可能被框架替换成新的DOM节点，之前通过addEventListener绑定的事件会跟着旧DOM一起被回收，自然触发不了。如果input元素是被v-if条件控制显示的，mounted触发时DOM还没渲染，根本拿不到元素，绑定逻辑直接失效。
• Rails生态特有冲突
  Rails 7默认集成的Turbo页面缓存机制、老项目自带的rails-ujs、自动引入的第三方上传类脚本，都可能抢占file input的事件绑定，或者打乱Vue组件的生命周期触发时机，导致事件绑定失效。
• 原生控件自身逻辑限制
  原生file input如果两次选中完全相同的文件（路径、文件名、修改时间一致），默认不会触发change事件；部分浏览器对格式错误的accept属性兼容有问题，也会阻塞事件触发。

可直接落地的修复方案 #

1. 弃用手动DOM绑定事件的写法，改用Vue原生事件绑定，从根源避免DOM引用失效问题
   首先修改模板里的input标签，直接绑定change事件，不需要再通过ref查找元素：

   <input 
     accept="image/jpeg,image/png,.jpeg" 
     type="file" 
     name="user[profile_picture]" 
     id="user_profile_picture"
     @change="handleFileChange"
   >
   

   把原来写在mounted里的事件逻辑抽成组件方法，修正原有代码里的变量赋值逻辑bug（原代码在文件读取回调里错误把旧预览地址赋值给了selectedFile）：

   mounted() {
     this.previewUrl = this.placeholder;
   },
   methods: {
     handleFileChange(event) {
       const input = event.target
       const selectedFile = input.files[0]
       if (!selectedFile) return
       
       const fakeFilePath = input.value
       // 文件大小校验
       if (selectedFile.size > this.sizeLimit) {
         alert(this.$t('error.file_size', { max_size: this.maxSize }));
         input.value = '';
         return
       }
   
       this.fileName = selectedFile.name
       // 图片预览逻辑
       if (this.preview === 'image') {
         const reader = new FileReader();
         reader.onload = e => {
           this.selectedFile = selectedFile
           this.oldImage = this.previewUrl;
           this.previewUrl = e.target.result;
           this.choosenFile = fakeFilePath;
         };
         reader.readAsDataURL(selectedFile);
       }
       // 重置input值，保证下次选同个文件也能触发change
       input.value = ''
     }
   }
   

2. 排查Rails侧的冲突问题
   • 如果项目开启了Turbo，给头像上传所在的页面片段加data-turbo="false"属性，禁用Turbo对该区域的缓存接管，避免Vue生命周期被打乱
   • 排查页面是否加载了其他抢占file input事件的脚本（比如旧的jQuery上传插件、rails-ujs的默认上传逻辑），临时禁用相关脚本测试事件是否能正常触发
3. 兼容问题兜底测试
   临时移除input上的accept属性，测试不同浏览器下事件是否能触发，排除属性格式兼容导致的事件阻塞。

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