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

问题描述

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

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屋！