主页 / 问题 / 1124234
Accepted
dmitriy
Asked:2020-05-12 16:15:01 +0000 UTC2020-05-12 16:15:01 +0000 UTC

如何在 Vue 中清除 input type="file" 组件

  • 772

如何正确清除文件类型的输入值？在 BaseFileUpload 组件上，我添加了 v-model="photo" 但在控制台中出现错误"InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string."

BaseFileUpload.vue

<template>
    <div class="form-group">
        <label v-if="label">{{ label }}</label>
        <input
            type="file"
            class="form-control-file"
            ref="fileupload"
            :value="value"
            @change="onChange($event.target.files)"
        />
    </div>
</template>

<script>
export default {
    name: 'BaseFileUpload',

    props: {
        label: {
            type: String,
            required: false,
            default: '',
        },

        value: {
            type: File
        },
    },

    methods: {
        onChange(files) {
            this.$emit('change', files[0]);
        },
    },
};
</script>

表单.vue

<BaseFileUpload v-model="photo" @change="onChangeFileUpload($event)" />
<button @click="clear()">clear</button>

data() {
        return {
            photo: null,
        };
    },

methods: {
  clear() {
    this.photo = null;
  }
}
vue.js

1 个回答

  1. Best Answer

    给定的错误

    未能在“HTMLInputElement”上设置属性“值”：此输入元素接受只能以编程方式设置为空字符串的文件名

    实际上包含答案。

    如果我们不能以编程方式设置 的input type="file"值value，那么v-model 您提供的实现指令不合适，因为v-model我们知道，该指令根据以下原则工作：

    v-bind:value="searchText"
v-on:input="searchText = $event.target.value"

    对于我们的例子，这意味着随着valuey的任何变化<input>，将触发一个执行上述逻辑的处理程序，即 分配一个新值。这是它Vue抛出无法分配新值的错误的地方，因为这种类型的输入字段 -type="file"如上所述，不能以编程方式将其更改为空字符串以外的值。

    互联网上有很多关于这个的讨论。我会给你一个选项作为解决你的问题的例子。注释被插入到代码中，我认为代码不会引起问题。

    const BaseFileUpload = Vue.component('BaseFileUpload', {
  props: {
    label: {
      type: String,
      required: false,
      default: '',
    }
  },
  methods: {
    onChange(e) {
      // здесь же можно подключить логику обработки файла (загрузку и прочее)
      // ...
      // или отдаем родителю файлы
      this.$emit('change', e.target.files);
      // также можно сразу очистить поле ввода
      // this.$refs.fileupload.value = null
    },
  },
  template: `
    <div>
        <label v-if="label">{{ label }}</label>
        <input
            type="file"
            class="form-control-file"
            ref="fileupload"
            multiple
            @change="onChange($event)"
        />
    </div>`
});

const app = new Vue({
  el: "#app",
  components: {
    BaseFileUpload
  },
  data() {
    return {
      images: []
    };
  },

  methods: {
    onChangeFileUpload(data) {
      this.images = [];
      // Здесь получаем файлы
      // и можем подключить логику обработки
      // здесь изображения просто отрисовываются на экран
      [...data].forEach((element) => {
        this.createImage(element)
      });
    },
    clear() {
      // очищаем переменные
      this.images = [];
      // полю ввода файла присваиваем пустую строку, что и очищает его
      this.$refs.upload.$refs.fileupload.value = null;
    },
    createImage(file) {
      var image = new Image();
      var reader = new FileReader();
      reader.onload = (e) => {
        this.images.push(e.target.result);
      };
      reader.readAsDataURL(file);
    }
  }
})
    h3 {
  margin: 0;
}

img {
  max-height: 80px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <h3>Vue - загрузка файлов</h3>
  <base-file-upload ref="upload" label="Выберите изображение(я)" @change="onChangeFileUpload($event)">
  </base-file-upload>
  <div v-if="images.length > 0">
    <hr>
    <img v-for="image in images" :src="image" />
    <hr>
    <button @click="clear()">Очистить все</button>
  </div>
</div>

    原理如下：我们remove v-model，清除我们使用的输入字段，我们将处理输入文件的逻辑连接$refs到方法中。onChangeFileUpload

    • 0

相关问题