在 vue.js 中更改文件输入 [英] File input on change in vue.js

问题描述

使用纯 HTML/JS，可以像这样查看输入元素的选定文件的 JavaScript 文件对象:

Using plain HTML/JS, it is possible to view the JavaScript File objects of selected files for an input element like so:

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

但是，当将其转换为 'Vue' 方式时，它似乎无法按预期工作，只是返回 undefined 而不是返回 File 对象数组.

However, when converting it to the 'Vue' way it doesn't seem to work as intend and simply returns undefined instead of returning an Array of File objects.

这是它在我的 Vue 模板中的样子:

This is how it looks in my Vue template:

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

previewFiles 函数只是以下内容(位于方法中):

Where the previewFiles function is simply the following (located in methods):

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

是否有替代/正确的方法来做到这一点?谢谢

Is there an alternate/correct way of doing this? Thanks

推荐答案

另一种解决方案:

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

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

这篇关于在 vue.js 中更改文件输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！