zoukankan      html  css  js  c++  java
  • vue项目中解决type=”file“ change事件只执行一次的问题

    问题描述

    在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件

    <template>
      <div class="hello">
          <input type="button" value="上传文件" name="" id="" @click="updata">
          <input type="file" style="display:none" @change="getFile" id="input-file">
          <div v-if="fileName">
            <p>上传的文件名:{{fileName}}</p>
            <button @click="delFile">清空文件</button>
          </div>
      </div>
    </template>
    
    <script>
    import $ from 'n-zepto'
    export default {
      name: 'HelloWorld',
      data () {
        return {
          fileName: ''
        }
      },
      methods:{
        updata(){ // 唤起change事件
          $('#input-file').click()
        },
        getFile(e){ // change事件
          this.doSomething()
        },
        doSomething(){ // do something
          this.fileName = e.target.files[0].name
        },
        delFile(){
          this.fileName=''
        }
      }
    }
    </script>
    

    因为我只是将data中的属性值清空而已,文件名没有变当然会不出发change事件

    解决办法

    目前网上有好多解决办法,但基本上都无法在vue上使用,于是我想到了v-if

    v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

    于是在代码中加入了一个小的开关,唤起change事件时就将他销毁

    事件结束时再将它重建,这样问题就轻松的解决了

    <template>
      <div class="hello">
          <input type="button" value="上传文件" name="" id="" @click="updata">
          <input v-if="ishowFile" type="file" style="display:none" @change="getFile" id="input-file">
          <div v-if="fileName">
            <p>上传的文件名:{{fileName}}</p>
            <button @click="delFile">清空文件</button>
          </div>
      </div>
    </template>
    
    <script>
    import $ from 'n-zepto'
    export default {
      name: 'HelloWorld',
      data () {
        return {
          fileName: '',
          ishowFile: true,
        }
      },
      methods:{
        updata(){ // 唤起change事件
          $('#input-file').click()
          this.ishowFile = false // 销毁
        },
        getFile(e){ // change事件
          this.doSomething()
          this.ishowFile = false // 重建
        },
        doSomething(){ // do something
          this.fileName = e.target.files[0].name
        },
        delFile(){
          this.fileName=''
        }
      }
    }
    </script>
    
  • 相关阅读:
    Linux下安装配置词典GoldenDict
    ubuntu 安装LaTex
    ubuntu 安装Opencv2.4.7
    Ubuntu 安装Matlab2010a
    Ubuntu 挂载ISO文件的方法
    ubuntu安装Java jdk1.7.0
    VDI转vmdk(VirtualBox与VMware硬盘格式转换)[转]
    oracle忘记密码,修改密码,解锁
    SQL Server 2008中文企业版下载地址和序列号[转]
    HTTP 错误 500.19 – Internal Server Error web.config 文件的 system.webServer/httpErrors 节中不允许绝对物理路径“C:inetpubcusterr”[转]
  • 原文地址:https://www.cnblogs.com/wangyue99599/p/9041571.html
Copyright © 2011-2022 走看看