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

【问题标题】：Error when using v-model on file input在文件输入上使用 v-model 时出错
【发布时间】：2017-11-06 00:36:46
【问题描述】：

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

文件输入是只读的。请改用 v-on:change 监听器。

我的代码是

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

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

【问题讨论】：

【解决方案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>

【讨论】：

【解决方案2】：

使用 ref 属性解决了，

this.$refs.fileInput.value = null;

【讨论】：

【解决方案3】：

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

【讨论】：