解决type为file的input框上传同名文件失效Bug

昨天测试人员跟我提了个bug，他说：“上传一张产品图片，删除该产品图片，再上传相同的产品图片，图片无显示”

                         

①点击上传图片

②删除图片

③再次上传这张图片

④无法显示

首先我们要理解，我们是通过input上传图片，然后通过将input的value值赋值给img元素的src属性来显示图片。假设给显示图片的<img>元素动态绑定src属性为imgSrc。

打个debugger调试发现：

①第一次上传图片会触发input的onChange事件，onChange事件将input的value赋值给imgSrc，

②第二步删除图片的操作，将imgSrc清空，图片从页面去除

③第三步再次上传相同的图片，因为第二步没有对input的value值清空，这时input框会对新传入的值进行对比，相同则触发onChange方法，不相同则不触发。因此这里没有触发onChange方法，也不会重新赋值给imgSrc

解决思路： 删除的时候将图片imgSrc去除，input的value值也一并去除

js、jQ、Vue清空input的value值

// JavaScript
<input id="uploadInput" type="file">
document.getElementById('uploadInput').value = ''

// jQuery
<input id="uploadInput" type="file">
$(" input[ type='file' ] ").val('')

// Vue
<input ref="uploadInput" type="file">
this.$refs.uploadInput.value = ''