从 v-file-input 获取有关 Vuetify 更改的事件答案

【问题标题】：Get Event from v-file-input on change in Vuetify从 v-file-input 获取有关 Vuetify 更改的事件
【发布时间】：2020-11-04 12:06:20
【问题描述】：

我在 Vuetify 中使用 Laravel 和 vue.js。我正在处理注册表。我正在传递图像文件。为此，我正在检查控制台以获取 (event) 中的图像，但它不起作用。它在控制台中的File 中显示图像值我在event 中获取图像值是什么

像这样我称之为控制台的东西

  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>

【问题讨论】：

您是否尝试过：event.target.files[0]？
@mare96 是的，我做到了，我在图像输入中遇到了罚款问题，因为我尝试了知道它可以工作，但它是引导程序如何在我的 vuetify 中修复
@mare96 尝试了 event.target.file[0] 但它给出了 TypeError: Cannot read property 'files' of undefined error

标签： laravel vue.js vuetify.js laravel-7

【解决方案1】：

您可以在 documentation 中阅读关于 vuetify 中输入字段的事件。

当您触发@change 时，您将获得File[] 而不是Event。

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

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

取自here。

另外，您可以尝试像这样通过$event 和@input：

@input="onFileSelected($event)"

未经测试，但我希望其中的一些内容对您有所帮助。

【讨论】：