Javascript/Html文件上传input控件onchange在相同的文件下不触发的问题解决

问题描述

Hmtl中有个如下的文件上传input控件，绑定了@change事件，在用户选择了文件后触发，来执行特定的业务逻辑

<input id="uploads" type="file" onchange="fileChanged(this)" accept="image/*">

<!--或者vue下的@change-->
<input id="uploads" type="file" @change="fileChanged" accept="image/*">

发现一个问题，在用户选择了A文件后，因为一些原因后，重新再选择A文件，这个时候，因为文件相同，导致没有触发@change，而我们希望只要选择了文件，都要触发@onchange

问题解决

只要在input的onclick下，清除下input file的值，让input认为我们是换了文件即可。代码如下：

<input id="uploads" type="file" onchange="fileChanged(this)" onclick="this.value=null;" accept="image/*">