Question

我无法从输入type = file重置图像文件来解决此问题。这是场景设置图像，然后单击“取消”按钮（这意味着已重置），然后我将再次设置相同的图像，但不会设置。我不知道为什么，但是我认为这是一个错误。

这是我用于重置图像/表格的代码。

opacity: 0

我正在使用Vue.js和Vuetify，如果有帮助。我希望你能帮助我。我陷入了这个问题

这里是HTML

    resetImage () {
  this.$refs.addImageForm.reset()
  this.dialog = ''
  this.imgSrc = ''
  this.fileName = ''
  this.imgUrl = ''
  this.file = ''
}

Answer 1

您可以使用ref来重置文件上传器的值。

this.$refs.fileupload.value=null;

codepen-https://codepen.io/Pratik__007/pen/MWYVjqP?editors=1010

Answer 2

我尝试了一些在Stackoverflow上发现的建议，但是在我的项目中有几个错误。解决我的问题的是：

<input type="file" ref="inputFile"/>

this.$refs.inputFile.reset();

上面的这段代码将重置字段值。

Answer 3

为了重置输入，我让 vue 重新渲染它。只需在输入中添加一个键，并在您希望清除文件输入时更改键的值。

像这样：

window.app = new Vue({
  el: '#app',
  data: {
    fileInputKey: 0
  },
  methods:{
    inputChange() {
      console.log('files chosen');
    },
    clear() {
        this.fileInputKey++;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="file" @change="inputChange($event)" :key="fileInputKey"/>
  <button @click="clear">Clear</button>
</div>

如何重置/清除文件输入

3 个答案: