您是否曾经有过具有文件选择器组件的情况，您可以清除文件模型，但是您无法再次选择同一文件？

codepen：https://codepen.io/schirrel/pen/YzRGrvq

好奇地解释了这一点。
首先是TL/DR：
您需要使用Vue的$refs并将输入设置为null。

现在，如果您想了解原因，让我们通过一些重要的东西传递：

首先：Vue与V-Model和文件输入不起作用，甚至在官方Vue的仓库上进行了讨论：Discussion。

现在让我们解开为什么不起作用，两个主要的事情：

1. 使用type="file"输入仅触发change事件，而V-Model会收听input事件。
2. v-Model需要设置value HTML属性，您尝试执行:value="myFileModel"的FF将显示出来： > NextTick中的错误：“ InvalidStateError：未能在'htmlinputelement'上设置'value'属性：此输入元素接受一个文件名，只能通过编程方式将其设置为空字符串。

因此，这是一个问题： 如何清除文件，最重要的是，如何再次选择？

让我们绘制一个简单的用例：您有自己的文件包装器使用文件输入（显然），但是将文件保存在data上。示例：

<template>
 <label for="inputFile">
      Click here to select you file
      <input type="file" name="inputFile" id="inputFile" @change="selectFile" />
    </label>
    <span v-if="file">
      File Selected {{ file.name }}
      <button @click="clearFile">remove</button>
    </span>
</template>
<script>
export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    selectFile(event) {
      this.file = event.target.files[0];
    },
    clearFile() {
      this.file = null;
    }
  }
};
</script>

即使clearFile将file设置为null，再次选择文件时，@change不会再次触发。这就是为什么，因为HTML值仍然存在，因此file prop上的数据不影响它。看看codepen示例。

一旦我们看到:value与文件无法使用，正确的方法是将HTML <input type="file" />纳入并以编程为单位重置此值。

通过将ref="fileInput"添加到<input>，然后在clearFile方法中添加：

this.$refs.fileInput.value = null

现在有效：

Codepen最终解决方案：https://codepen.io/schirrel/pen/XWyjeOw

注意：这是跨框架的常见行为;