V-model 指令不支持输入类型="file"

Question

我正在尝试更新我的数据库中的用户配置文件数据，但我卡在了用户配置文件图片上。我不能使用 v-model 进行绑定，并且使用 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 仅适用于使用 value 绑定的 input，其中输入类型文件不使用 input value，使用 input type file 与 v-model

onFileChange(e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.file = files[0]
      this.createImage(this.file);
    },

V-model 指令不支持输入类型="file"

V-model directives don't support input type="file"

html

javascript

bind

vue.js

v-model