한 번만 실행되는 vue 프로젝트에서 type="file" 변경 이벤트를 처리하는 방법

이번에는 vue 프로젝트에서 한 번만 실행되는 type="file" 변경 이벤트를 처리하는 방법을 보여드리겠습니다. vue 프로젝트에서 type="file" 변경 이벤트를 처리할 때 주의할 점은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

문제 설명

최근 프로젝트 개발 중에 이런 문제가 발생했습니다. 파일을 업로드할 때 얻은 파일 이름을 삭제했는데 동일한 파일을 다시 업로드할 수 없습니다

<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>

속성 값만 삭제했기 때문에 ​​​​파일 이름이 변경되지 않았다면 당연히 변경 이벤트가 발생하지 않습니다

Solution

온라인에는 많은 솔루션이 있지만 기본적으로 vue에서는 사용할 수 없습니다. v-if가 떠오릅니다

v-if는 "true" 조건부 렌더링입니다. 이는 조건부 블록 내의 이벤트 리스너와 하위 구성 요소가 전환 중에 적절하게 삭제되고 다시 생성되도록 보장하기 때문입니다.

그래서 코드에 작은 스위치를 추가했습니다. 이 스위치는 변경 이벤트가 발생하면 삭제됩니다

이벤트가 종료되면 다시 빌드하여 문제를 쉽게 해결할 수 있도록

<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>

읽고 마스터하셨을 거라 믿습니다. 이 기사의 방법에 대한 사례입니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Vue를 사용하여 Amap을 만들고 실시간 버스 애플리케이션을 구축하는 방법

Vue2x_vue.js를 기반으로 하는 반응형 적응형 캐러셀 구성 요소 플러그인의 VueSliderShow 기능을 사용하는 방법

위 내용은 한 번만 실행되는 vue 프로젝트에서 type="file" 변경 이벤트를 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!