如何在 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: {&nbsp; getFileObject(file:any) {&nbsp; &nbsp; console.log(file);&nbsp; &nbsp; console.log(this.files)&nbsp; }}

Answer 2

事件有一个参数，该参数是文件数组：&nbsp; @change="getFileObject($event)"></v-file-input>&nbsp; &nbsp;然后在脚本中：&nbsp; &nbsp; &nbsp;async getFileObject(files:File[]){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.fileObj = await files&nbsp; &nbsp; &nbsp; &nbsp; console.log(this.fileObj)&nbsp; &nbsp; &nbsp;}