如何通过单击按钮获取文件对象属性？

Question

我目前有一个带有文件输入的表单，我需要在单击按钮时获取其值。我可以使用当前随附的@change道具来获取信息，但是我需要在按钮上单击表格。

<v-card>
  <v-card-title>
    <h2>New File Submission</h2>
  </v-card-title>
  <v-card-text>
    <v-form v-model='valid' ref='form' lazy-validation>
      <v-container>
        <!-- file input -->
        <v-row>
          <v-col cols='12' md='12'>
            <v-file-input
              v-model='files'
              ref='files'
              color='success'
              counter
              label='File input'
              accept='.csv'
              placeholder='Select your files'
              prepend-icon='mdi-paperclip'
              outlined
              :rules='fileRules'
              :show-size='1000'
              @change='fileSelected($event)'
            >
              <template v-slot:selection=' index, text '>
                <v-chip v-if='index < 2' color='success' dark label small> text </v-chip>

                <span
                  v-else-if='index === 2'
                  class='overline grey--text text--darken-3 mx-2'
                >+ files.length - 2  File(s)</span>
              </template>
            </v-file-input>
          </v-col>
        </v-row>
      </v-container>

      <v-btn :disabled='!valid' text class='success mx-0 mt-3' @click='submitFile'>Submit File</v-btn>
      <v-btn text class='error mx-0 ml-3 mt-3' @click='reset'>Reset Form</v-btn>
    </v-form>
  </v-card-text>
</v-card>

我在文件输入上添加了一个引用，并尝试通过我的Submit函数以这种方式访问它，如下面的代码所示。

data() 
    return 
      files: [],
      fileRules: [v => !v || v.size < 2000000 || 'A file is required'],
    ;
  

submitFile() 
      if (this.$refs.form.validate()) 
        const file = this.$refs.files.file
        console.log(file)

控制台使用上面的代码记录“未定义”。如果执行const file = this.$refs.files.file[0]，则会收到“ v-on处理程序中的错误：“ TypeError：无法读取未定义的属性'0'””

提供任何帮助，我一直在尝试到处寻找解决方案，但似乎找不到解决方案。谢谢！