input[type=file]change事件第二次不触发

问题与解析

用input上传图片时，如果第二次传递的跟第一次是一样的图片，那么此时会出现：change事件不再触发。

<input type="file" ref="upload" id="imgUrl" @change="uploadChange"
     accept="image/jpg, image/jpeg, image/png" />

解析：

首先这种情况是正常的，不是bug，我们可以看到，每次上传的时候input右侧都有一个文件名。那么change事件会根据这个文件名value是否修改来触发change事件。

所以解决方法就是在change事件中的最后将本次的value置空。

document.getElementById('imgUrl').value = '';
或者
this.$refs["upload"].value = ''

接下来插入同名图片的时候，就不会出现这种问题了。