vue重复上传同一个文件无响应不会触发回调事件

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>

猜你喜欢

转载自blog.csdn.net/weixin_52691965/article/details/127086799