input[type="file"] change事件在安卓环境下第二次不触发原因

工作时遇到一个奇怪的bug, input[type="file"] change事件第一次上传图片是可以正常触发change事件的, 但是第二次在选择同一张图片就不触发了, change事件是不执行的:

    <!-- change 不触发 -->
    <input
      id="uploadImg"
      class="hide_input"
      type="file"
      accept="image/png,image/jpeg,image/gif,image/jpg"
      @change="uploadImg"
      ref="uploadImg"
    />

这与change事件的特性有关:

当用户更改 <input>、<select> 和 <textarea> 元素的值时，change 事件在这些元素上触发。和 input 事件不同的是，并不是每次元素的 value 改变时都会触发 change 事件。

通过 <input type="file"> 元素上传了一个文件也会触发, HTML 标准列出了应该触发 change 事件的 <input> 类型
但是在安卓环境下, 对于<input type="file">的value, 同一张图片, value值是一样的, 因此不触发change事件, 导致图片不会被上传

既然知道了原因那么就很好解决了, 只有在点击input标签时, 手动清理一下value就可以了:

   this.$refs.inputName.value = ''

本文参与了SegmentFault 思否 2023 年度有奖征文活动，欢迎正在阅读的你也加入。