Laravel 在Vuetify中更改时从v-file-input获取事件

我在Vuetify中使用带有vue.js的Laravel。我正在写登记表。我正在传递图像文件。为此，我正在检查控制台以获取

（事件）

中的图像，但它不起作用。它在控制台I中显示

文件中的图像值
在
事件中获取图像值的内容

像这样，我称之为控制台

  methods: {
   onFileSelected(event){
     console.log(event);
   },

控制台结果如下所示

File {name: "Webp.net-resizeimage.jpg", lastModified: 1603892951080, lastModifiedDate: Wed Oct 28 2020 19:19:11 GMT+0530 (India Standard Time), webkitRelativePath: "", size: 27077, …}
lastModified: 1603892951080
lastModifiedDate: Wed Oct 28 2020 19:19:11 GMT+0530 (India Standard Time) {}
name: "Webp.net-resizeimage.jpg"
size: 27077
type: "image/jpeg"
webkitRelativePath: ""
__proto__: File

我的登记表

<template>
  <div>
    <v-row justify="center">
      <v-col cols="12" sm="6">
        <form enctype="multipart/form-data">
          <v-card ref="form">
            <v-card-text>
              <h2 class="text-center">Business Register</h2>
              <v-divider class="mt-3"></v-divider>

              <v-col cols="12" sm="12">
                <v-text-field
                  v-model.trim="form.owner_name"
                  type="text"
                  label="Owner Name"
                  outlined
                  autocomplete="off"
                ></v-text-field>
              </v-col>

              <v-col cols="12" sm="12">
                <v-file-input
                  label="shop_front_image"
                  outlined
                  autocomplete="off"
                  @change="onFileSelected"
                ></v-file-input>
              </v-col>

              <v-card-actions>
                <v-btn
                  rounded
                  type="submit"
                  :loading="loading"
                  color="primary"
                  dark
                  >Register</v-btn
                >
              </v-card-actions>
              <br />
            </v-card-text>
          </v-card>
        </form>
      </v-col>
    </v-row>
  </div>
</template>

<script >
export default {
  created() {
    if (!User.loggedIn()) {
      this.$router.push({ name: "Login" });
    }
  },
  data() {
    return {
      loading: false,

      form: {
        owner_name: "",

        shop_front_image: "",
      },
      errors: {},
    };
  },
  methods: {
    onFileSelected(event) {
      console.log(event);
    },
  },
};
</script>


商业登记
登记


导出默认值{
创建（）{
如果（！User.loggedIn（））{
这是.$router.push（{name:“Login”}）；
}
},
数据（）{
返回{
加载：false，
表格：{
所有者名称：“”，
店面图片：“，
},
错误：{}，
};
},
方法：{
选举（事件）{
console.log（事件）；
},
},
};
正如您在vuetify中输入字段的“关于事件”中所读到的那样

当您触发
@change
时，您将获得
文件[]
而不是
事件

您可以将
$event
作为第二个参数传递，如下所示：

@change="onFileSelected('something', $event)"

摘自

此外，您还可以尝试使用
@input
传递
$event
，如下所示：

@input="onFileSelected($event)"

未测试，但我希望这能对您有所帮助。
您是否尝试过：
事件.目标.文件[0]
？@mare96是的，我尝试过，我在图像输入中发现了问题，因为我尝试知道它在工作，但这是一个引导我如何在我的vuetify@mare96已尝试事件。目标。文件[0]但它给出了TypeError:无法读取未定义错误的属性“文件”