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>

属性値をクリアしただけなので。データ内のファイル名が変更されていない場合、当然、変更イベントはトリガーされません

解決策

ネット上には解決策がたくさんありますが、基本的にvueでは使えないので、 v-if が思い浮かびます

v-if は、条件ブロック内のイベント リスナーとサブコンポーネントが切り替え中に適切に破棄され、再作成されることを保証するため、「真」の条件付きレンダリングです。

そこで、変更イベントが呼び出されたときに破棄される小さなスイッチをコードに追加しました

問題が簡単に解決できるように、イベントが終了したら再構築してください

<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 中国語 Web サイトの他の関連記事にご注意ください。

推奨書籍:

Vue を使用して Amap を作成し、リアルタイム バス アプリケーションを構築する方法

Vue2x ベースのレスポンシブ アダプティブ カルーセル コンポーネント プラグインの使用方法VueSliderShow function_vue.js

以上がvue プロジェクトで一度だけ実行される type='file' 変更イベントを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。