change事件触发条件是文件上传框内容改变才可以,每次上传完文件默认是不清空上一次上传的内容的,这样上传同名文件就不会触发change事件。
网上现有的方法就是重置input上传文件的标签的dom结构,在vue里我的实现方法就是v-if去控制。
v-if=”clearShow”,初始化数据为true,在change事件触发的函数里设置clearShow为false,即移除了该input标签,然后在回调函数中再设置clearShow为true,这时的文件上传框就是清空的了。再上传同名文件也不会受影响了。
<input
v-if="clearShow"
class="upload_input"
type="file"
@change="upExecl"
ref="upExecl"
style="opacity: 0"
accept=".doc,.pdf,.docx"
/>
<script>
//上传公文
upExecl(e) {
this.clearShow = false;
let self = this;
self.fileId = "";
let file = e.target.files[0];
this.reportTemplateModel.title = file.name;
this.param.file = file;
this.titleName = file.name;
upload({ file }).then((res) => {
this.clearShow = true;
let { data } = res.data;
this.content = data;
this.$refs.modelTxtQuill.quill.setText(data);
});
},
</script>