今天在公司遇到一个需求,点击一个按钮弹出一个弹出框 里面有input上传文件,第一次上传很成功,在次打开弹出框,继续input上传文件时候还没有选中文件,确触发了change事件。
因为当时用label 修改了input的样式,所以没看到第二次准备上传文件时,第一次的文件并没有清空的情况。
最后想了一个办法:在每次上传文件后清空文件。
首先在外层套一个form表单
<form id="file_form">
<label for='upload' class='uploadBtn'>批量导入</label>
<input type="file" id="upload" @change="onBeforeUpload" style="display: none">
</form>
然后每次上传文件后,重置以下表单
document.getElementById('file_form')&&document.getElementById('file_form').reset();