3

如何从 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

非常感谢

4

1 回答 1

4

不支持双向绑定<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" />
于 2018-02-02T12:45:42.920 回答