在文件输入上使用v-model时出错

Question

我有一个文件输入，我需要在文件上传后清除它。我尝试将空值设置为v-model，但它生成了以下错误

  

文件输入是只读的。使用v-on：改变监听器。

我的代码是

<input id="fileupload" type="file" v-model="file" multiple v-on:change="uploadFile" ref="fileInput" />

如何在上传后清除vue.js中的文件输入，以便我可以连续多次上传相同的文件

Answer 1

您正在使用v-on:change="uploadFile"并猜测您的uploadFile有成功回调，您可以执行以下操作：

- 在表单中包含输入并为表单添加ref属性

<form ref="myFileInputForm">
     <input id="fileupload" type="file" v-model="file" multiple v-on:change="uploadFile" ref="fileInput" />
</form>

• 在uploadFile的成功回调中执行此操作：

  this.$refs.myFileInputForm.reset();

Answer 2

文件输入是只读的。 不要绑定元素，删除v-model="file"

Answer 3

使用ref属性解决它，

this.$refs.fileInput.value = null;