如何在 Nuxt.js 中使用 v-file-input 获取文件对象？

Question

我使用 Vuetify.js 作为 Nuxt.Js 的 UI 框架。我想在输入文件我的应用程序时获取文件对象。所以我在 Vuetify.Js 中使用了 v-file-input 组件，并编写了如下代码。    <template>    <div>        <v-file-input            label="fileinput"            multiple            v-model="files"            @change="getFileObject()"></v-file-input>        </div>    </template><script>import { Component, Vue } from 'nuxt-property-decorator'@Component({})export default class extends Vue{    files:any = []    fileObj:any = {}    async getFileObject(file:any){        this.fileObj = await file        console.log(this.fileObj)    }}</script>我使用 console.log 检查了文件对象。但“this.fileObj”未定义。输入文件时如何获取文件对象？有人能给我建议吗？

Answer 1

如果从处理程序中删除空参数，则应隐式传递该参数。它还应该在this.files用作输入的v-model：

@change="getFileObject"

methods: {

  getFileObject(file:any) {

    console.log(file);

    console.log(this.files)

  }

}

Answer 2

事件有一个参数，该参数是文件数组：

  @change="getFileObject($event)"></v-file-input>   

然后在脚本中：

     async getFileObject(files:File[]){

         this.fileObj = await files

        console.log(this.fileObj)

     }