Question

如何从input 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: {
  filesSelected: 0
},
methods: {
  handleFileChange(evt, index) {
    this.filesSelected = evt.target.files.length;
  }
}

然后在模板中使用它：

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

输入类型文件vue.js上的v-model

1 个答案: