Question

我正在尝试更新数据库中的用户配置文件数据，但是我停留在用户配置文件映像上。我不能使用v模型进行绑定，并且使用v-on：change不能正常工作。到目前为止，这是我的代码，它可以正常工作，唯一的问题是绑定。

<template>
-----
          <div v-if="!image">
            <h2>Select an image</h2>
            <input type="file" @change="onFileChange" /> ---->here I would like to use the v-model but can't use it on input type="file"
          </div>
          <div v-else>
            <img :src="image" />
            <button @click="removeImage">Remove image</button>
          </div>
          <input
            type="text"
            placeholder="Userame"
            v-model="user.username"
            required
          />
          <button
            type="button"
            class="btn btn-outline-warning waves-effect"
            aria-label="Left Align"
            @click.prevent="updateProfile(user)"
          >
            Update profile
          </button>
       ---
</template>

<script>
export default {
  data: function () {
    return {
      user: {},
       image: ''
    };
  },

  methods: {
    onFileChange(e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length)
        return;
      this.createImage(files[0]);
    },
    createImage(file) {
      var image = new Image();
      var reader = new FileReader();
      var vm = this;

      reader.onload = (e) => {
        vm.image = e.target.result;
      };
      reader.readAsDataURL(file);
      console.log(file.name);
    },
    removeImage: function (e) {
      this.image = '';
  },
    updateProfile() {
      store
        .dispatch("updateProfile", {
          username: this.user.username,
          email: this.user.email,
          profileImage: this.file ------>I need it for the binding here

</script>

Answer 1

您忘记了将文件绑定到this.file。将您的onFileChange方法更新为此??，它将起作用。

注意：v-model仅与使用input绑定的value一起使用，其中输入类型文件不使用input value，使用{{1 }}和v-model

input type file

V模型指令不支持输入type =“ file”

1 个答案: