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

Question

我在 Vuetify 中使用 Laravel With 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>

Answer 1

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

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

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

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

摘自 here.

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

@input="onFileSelected($event)"

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

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

Get Event from v-file-input on change in Vuetify

laravel

vue.js

vuetify.js

laravel-7