JavaScript 使用＜input type=“file“＞无法上传相同文件的坑

【问题现象】

使用<input type = "file">标签上传文件时，若两次上传的是同一个文件，服务端接收不到上传文件的http请求。

【排查过程】

• 首先要明确问题出在服务端还是web客户端。用Fiddler软件监测，发现两次上传同一个文件，只截获到一个http请求。可以确定问题出在web客户端没有成功发送第二次上传文件的http请求。
• 逐层检查相关函数，发现<input type="file">标签中onchange事件对应的函数没有被调用。

【原因】

两次上传同一个文件时，<input type="file">的value是一样的，所以不会触发onchagne事件。

【解决方法】

每次选择完需要上传的文件后，将所需信息保存，再将的value值进行清空。

document.getElementById('fileupload').value = '';	//fileupload是<input type="file">标签的id名

看到网上还有说可以使用这种方法的

let file = document.getElementById('fileupload');
file.outerHTML = file.outerHTML;

不知道是不是因为我用的是Vue框架，并且将语句写在了methods的方法中，上述方法测试无效，有遇到相同问题的朋友也可以蛮试下。

【参考文章】

js文件上传以及js清空input file值

js清空input file的值