【问题现象】
使用<input type = "file">标签上传文件时，若两次上传的是同一个文件，服务端接收不到上传文件的http请求。
【问题现象】
首先要明确问题出在服务端还是web客户端。用Fiddler软件监测，发现两次上传同一个文件，只截获到一个http请求。可以确定问题出在web客户端没有成功发送第二次上传文件的http请求。
逐层检查相关函数，发现<input type="file">标签中onchange事件对应的函数没有被调用。
【原因】
两次上传同一个文件时，<input type="file">的value是一样的，所以不会触发onchagne事件。
【解决方法】
每次选择完需要上传的文件后，将所需信息保存，再将的value值进行清空。
$event.target.value = ''
<template>
<div>
<input id="input_temp_file1" type="file" name="" accept=".xls,.xlsx,.csv" style="display:none;" @change="checkFileSure($event)">
<el-button @click="checkFile()">导入</el-button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
// 导入按钮点击事件
checkFile() {
document.querySelector('#input_temp_file1').click()
},
// 选择的文件
checkFileSure($event) {
console.log($event)
console.log($event.target.value)
const formData = new FormData()
const files = $event.target.files[0]
// if (!files) {
// return
// }
formData.append('file', files)
this.$confirm('确认导入"' + document.querySelector('#input_temp_file1').files[0].name + '"吗?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log('成功')
$event.target.value = ''
// 调用的方法
// this.uploadPreFile(formData).then( res => {
// console.log(res)
// }).catch((error) => {
// console.log(error)
// })
}).catch(() => {
console.log('取消')
})
}
}
}
</script>
