web-dev-qa-db-ja.com

vue.jsの変更時のファイル入力

プレーンHTML/JSを使用すると、次のようにinput要素の選択したファイルのJavaScript Fileオブジェクトを表示できます。

<input type="file" id="input" multiple onchange="handleFiles(this.files)">

ただし、「Vue」の方法に変換すると、意図したとおりに動作せず、Fileオブジェクトの配列を返す代わりに、単にundefinedを返します。

これは私のVueテンプレートでどのように見えるかです：

<input type="file" id="file" class="custom-file-input" 
  v-on:change="previewFiles(this.files)" multiple>

previewFiles関数は、次のとおりです（メソッド内にあります）。

  methods: {
    previewFiles: function(files) {
      console.log(files)
    }
  }

これを行うための代替/正しい方法はありますか？ありがとう

javascriptvue.jsvuejs2vue-component
29
Ashley B

これを試して。

<input type="file" id="file" ref="myFiles" class="custom-file-input" 
  @change="previewFiles" multiple>

そして、コンポーネントオプションで：

data() {
  return {
    files: [],
  }
},
methods: {
  previewFiles() {
    this.files = this.$refs.myFiles.files
  }
}
47
Ikbel

別の解決策：

<input type="file" @change="previewFiles" multiple>

methods: {
   previewFiles(event) {
      console.log(event.target.files);
   }
}
46
oboshto