How to handle the type='file' change event in the vue project that is only executed once

This time I will show you how to handle the type="file" change event that is only executed once in the vue project. What are the precautions for handling the type="file" change event in the vue project that is only executed once. The following is a practical case. Let’s take a look.

Problem description

I encountered such a problem during recent project development. When I uploaded a file, I cleared the obtained file name. , but cannot upload the same file again

<template>
 <p class="hello">
   <input type="button" value="上传文件" name="" id="" @click="updata">
   <input type="file" style="display:none" @change="getFile" id="input-file">
   <p v-if="fileName">
    <p>上传的文件名：{{fileName}}</p>
    <button @click="delFile">清空文件</button>
   </p>
 </p>
</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>

Because I just cleared the attribute values ​​​​in the data, and the file name has not changed, of course the change event will not be triggered

Solution Solution

There are many solutions on the Internet, but basically they cannot be used on vue, so I thought of v-if

v-if is "real" of conditional rendering as it ensures that event listeners and subcomponents within the conditional block are destroyed and recreated appropriately during the switch.

So a small switch was added to the code, and it would be destroyed when the change event was evoked.

Rebuild it when the event ended, so that the problem was easily solved

<template>
 <p class="hello">
   <input type="button" value="上传文件" name="" id="" @click="updata">
   <input v-if="ishowFile" type="file" style="display:none" @change="getFile" id="input-file">
   <p v-if="fileName">
    <p>上传的文件名：{{fileName}}</p>
    <button @click="delFile">清空文件</button>
   </p>
 </p>
</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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use Vue to make Amap and build a real-time bus application

How to use Vue2x-based implementation Responsive adaptive carousel component plug-in VueSliderShow function_vue.js

The above is the detailed content of How to handle the type='file' change event in the vue project that is only executed once. For more information, please follow other related articles on the PHP Chinese website!