Question

我在Vuetify上使用Laravel和vue.js。我正在填写注册表。我正在传递图像文件。为此，我正在检查控制台以获取(event)中的图像，但是它不起作用。它在控制台的File中显示图像值I在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文件输入获取事件

1 个答案: