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都不行啊