vue.js 中更改的文件输入

新手上路,请多包涵

使用纯 HTML/JS,可以查看输入元素的选定文件的 JavaScript 文件对象,如下所示:

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

但是,当将其转换为“Vue”方式时,它似乎无法按预期工作,只是返回 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)
    }
  }

有替代/正确的方法吗?谢谢

原文由 Ash 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 347
2 个回答

另一种解决方案:

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

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

原文由 oboshto 发布,翻译遵循 CC BY-SA 4.0 许可协议

尝试这个。

 <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
  }
}

原文由 Ikbel 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题