【问题现象】
使用<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的方法中,上述方法测试无效,有遇到相同问题的朋友也可以蛮试下。
【参考文章】