vue做一个上传头像，可以清除 input 里面的 file 吗？

Question

<div class="upload">    // 显示图片的地方 一开始隐藏，上传后显示    <div class="show" v-bind:class="{showpic: is_show_pic}">        // 图片的 src 绑定在 vue data 里        <img style="text-align:center" :src="src" width="100px">        <span class="delete-pic" @click="delete_pic">x</span>    </div>        // input是没有大小的，直接点击label触发    <input @change="show_pic" type="file" id="file" class="inputfile" accept="image/png, image/jpeg, image/jpg" />    // 点击上传图片 上传后隐藏这个label    <label :class="{hide: isHide}" for="file" class='file-label'>上传头像</label></div>show_pic(e) {    f = e.target.files[0]    var reads= new FileReader();    reads.readAsDataURL(f);    let that = this    reads.onload=function (e) {        // 将图片赋值给 vue data 里的 src 用以渲染到页面上         that.src=this.result;                    };    this.is_show_pic = true    this.isHide = true},// 删除已经上传的图片delete_pic() {    // 但是只是清空了 vue data 的数据    // 如果现在再次上传图片show_pic函数就进不去，除非重新刷新，    // 看上去好像是应该把input里的file也一起清空？    // 但是这是只读属性操作不了    // 这里应该怎么做呢    this.src = ''},

Answer 1

input.value = ''

Answer 2

file类型是只读的

在input外面加个form标签

清空form表单内容就行了。

<form id='videoForm'>

<input @change="show_pic" type="file" id="file" class="inputfile" accept="image/png, image/jpeg, image/jpg" />

</form>

document.getElementById('videoForm')&&document.getElementById('videoForm').reset();

第二种：

document.getElementById('').outerHtml = document.getElementById('').outerHtml

Answer 3

试过input value为空，试过form都不行啊