在做上传文件的时候，大家会引入input标签。但在实现的过程中，在上传一个文件后，第二次上传同一个文件时会无法触发上传的代码，问题其实这样解决。
<input type="file" ref="referenceUpload" @change="onUpload" style="width: 78px;outline: none;height: 30px;z-index: 999;opacity: 0;"></Input>
<Button type="primary" style="margin: 0px 0px 0px -83px;">上传文件</Button>js：
//上传PDF文件
onUpload(e) {
var formData = new FormData();
formData.append('file', e.target.files[0]);
formData.append('token', localStorage['token']);
this.loadingst();
this.axios.post('/report/upload', formData, {
emulateJSON: true
}).then(function(res) {
this.loadingsts();
if(res.data.code == 200) {
this.file_path = res.data.data.save_path;
this.fromValue.report_name = res.data.data.name;
this.file_name = res.data.data.name + '.pdf';
this.file_size = res.data.data.size;
this.file_size_name = ' | ' + res.data.data.size;
this.$Notice.success({
title: '提示',
desc: '上传成功 !',
duration: 3
})
} else {
this.$Notice.warning({
title: res.data.msg,
duration: 3
});
}
}.bind(this))
e.target.value = '';
},关键
实现功能的关键在于最后一句：
e.target.value='';因为触发条件为change，当input里储存的文件没有变化的时候是不会进入函数的，所以在上传的最后，把input中的value值清空就好了。
问题发生背景
使用input[type=file] 实现文件上传功能，通过onchange事件触发js代码，这个时候第一次上传是完全没问题的，不过当你第二次上传文件时，如果是不同于上一次上传文件的话是可以正常上传的，不过如果你选择的还是上一个文件，也就是两次上传的文件重复了，那么就会上传失败。
原因
input是通过onchange事件来触发js代码的，由于两次文件是重复的，所以这个时候onchange事件是没有触发到的。
解决方案
方案一： 删除input标签的代码并重新添加dom节点，不过这个方案太笨拙，所以使用方案二。
方案二： 把input的value重新设置为空就好了，
document.getElementById('uploadFile').value = null;
this.$refs.referenceUpload.value = null;//vue中本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！