如何在 Nuxt.js 中使用 v-file-input 獲取文件 object？

Question

我使用了 Vuetify.js 作為 Nuxt.Js 的 UI 框架。 當我輸入文件我的應用程序時，我想獲取文件 object。 所以我在 Vuetify.Js 中使用了 v-file-input 組件，並編寫了如下代碼。

    <template>
    <div>
        <v-file-input
            label="fileinput"
            multiple
            v-model="files"
            @change="getFileObject()"></v-file-input>    
    </div>    
</template>
<script lang="ts">
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 檢查了文件 object。 但“this.fileObj”未定義。 輸入文件時如何獲取文件 object？ 誰能給我建議？

Answer 1

如果你從處理程序中刪除空參數，它應該被隱式傳遞。 它也應該在用作輸入的v-model的this.files上：

@change="getFileObject"

methods: {
  getFileObject(file:any) {
    console.log(file);
    console.log(this.files)
  }
}

Answer 2

@change事件有一個參數，文件數組：

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

然后在腳本中：

     async getFileObject(files:File[]){
         this.fileObj = await files
        console.log(this.fileObj)
     }