輸入類型文件vue.js上的v模型

Question

如何從輸入type =“ file” multiple中的v-model數組中獲取數據？

<input type="file" multiple v-model="modFiles[index]">
<input type="file" multiple v-model="modFiles[index]">
<input type="file" multiple v-model="modFiles[index]">

我正在使用v-for循環，我可以從每個modFiles []中獲取第一個數據。

this.modFiles[0] //take the first from multiple file

但這只是第一批數據。 如何獲取modFiles [0]，modFiles [1]，modFiles [3]中的所有數據？ 以及如何計算每個modFiles內部的數據？

this.modFiles[0].length //i get error here

非常感謝

Answer 1

<input type="file">不支持雙向綁定，因為不允許在此類輸入上設置值（僅在用戶選擇文件后才設置值）。

使用@change事件：

<input type="file" multiple @change="handleFileChange($event, index)">

methods: {
  handleFileChange(evt, index) {
    // evt.target.files contains Array-like FileList object
  }
}

更新：

為了根據選定文件的數量顯示/隱藏您的提交按鈕，請引入新的data屬性：

data: {
  filesSelected: 0
},
methods: {
  handleFileChange(evt, index) {
    this.filesSelected = evt.target.files.length;
  }
}

然后在模板中使用它：

<input type="submit" v-show="filesSelected > 0" />