Javascript 在vue中删除图像时如何使输入类型文件为空？

我有一个表单，我需要上传一个图像，一切正常，但问题是当我删除图像并再次上传相同的图像时，文件

@change

功能没有被触发。我无法使文件值为空

我已尝试在“删除图像”上更改

this.$refs.fileInput.type

，并将ref文件设置为null，甚至将值设置为null

<template>
  <div>

    <v-layout>

      <v-container style="margin:0px">

        <v-form>
<v-badge right v-if="certificateImage" color="red" class="close-btn">
                     <span slot="badge" @click="removeImage">X</span>
                    <img :src="certificateImage" height="150px"  
    @click="onPickFile">
                   </v-badge>
                    <img v-if="!certificateImage" 
   src="https://imgplaceholder.com/640x360" height="150px"  @click="onPickFile">
                    <input type="file" style="display:none" 
ref="fileInput" id="fileInput" accept="image/*" @change="onFilePicked">

</v-form>
      </v-container>
</v-layout>
/div>

</template>

X
/div>

数据（）{
返回{
证书年龄：“，
}
},
方法：{
onPickFile（）{
这是.$refs.fileInput.click（）
},
onFilePicked（事件）{
log（this.$refs.fileInput.type，“sdfds”）；
const files=event.target.files；
让filename=文件[0]。名称；
if（filename.lastIndexOf（'.'））{
this.certificateImage=fileReader.result；
log（this.certificateImage，“图像url”）；
})
fileReader.readAsDataURL（文件[0]）
this.image=文件[0]
//创建根引用
},
}
removeImage:函数（e）{
console.log（'已删除'）
此.certificateImage=''；
这是.$refs.fileInput.type='text'；
这是.$refs.fileInput.type='file'；
},

.image1{
垫面：5px；
宽度：35px
}
.image2{
宽度：80px；
}
.移除{
宽度：12px；
边界半径：50%；
背景：红色；
颜色：白色；
}
输入[类型=文件]{
光标：指针；
宽度：159px；
高度：34px；
溢出：隐藏；
}
输入[类型=文件]：在{
宽度：158px；
高度：32px；
字体大小：16px；
线高：32px；
内容：“选择您的文件”；
显示：内联块；
背景#8080；
颜色：白色；
边框：1px实心#0000002e；
填充：0 10px；
文本对齐：居中；
字体系列：Helvetica、Arial、无衬线字体；
}
输入[类型=文件]：-webkit文件上载按钮{
可见性：隐藏；
}
.选择图像{
颜色：00000085；
左侧填充：5px；
浮动：左；
右边填充：10px；
垫面：4px；
}
.选择图标{
颜色：00000085；
左侧填充：5px；
浮动：左；
右边填充：10px；
垫面：4px；
}
.关闭btn：悬停{
光标：指针；
}

---

所以，在删除图像并再次上传相同的图像后，我想运行更改输入类型文件的功能。

解决了我使用错误的ref，现在它工作了

试试这个：

。。。
方法：{
移除图像（）{
document.querySelector（'#fileInput'）。值=''
}
}
…

解决了我使用了错误的参考号，现在可以使用了。请将其作为您自己的答案发布

<script>
data(){
    return{
certificateImage:"",

}
},
methods:{
onPickFile(){
        this.$refs.fileInput.click()


      },
      onFilePicked(event){
console.log(this.$refs.fileInput.type,"sdfds");
        const files=event.target.files;
         let filename =files[0].name;
        if(filename.lastIndexOf('.')<=0){
          return alert('Please enter a valid image')

        }
        const fileReader=new FileReader();

        fileReader.addEventListener('load',()=>{
          this.certificateImage=fileReader.result;
          console.log(this.certificateImage,"image url");
        })
        fileReader.readAsDataURL(files[0])
        this.image=files[0]
            // Create a root reference

      },

}
 removeImage: function (e) {
        console.log('removed')
      this.certificateImage = '';
this.$refs.fileInput.type='text';
this.$refs.fileInput.type='file';
    },
</script>

<style scoped>

.image1{
  padding-top:5px;
  width:35px
}
.image2{
  width:80px;
}
.remove{
  width: 12px;
    border-radius: 50%;
    background: red;
    color:white;

}
input[type=file] {
  cursor: pointer;
  width: 159px;
  height: 34px;
  overflow: hidden;
}

input[type=file]:before {
  width: 158px;
  height: 32px;
  font-size: 16px;
  line-height: 32px;
  content: 'Select your file';
  display: inline-block;
  background: #808080;
  color:white;
  border: 1px solid #0000002e;
  padding: 0 10px;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
}

input[type=file]::-webkit-file-upload-button {
  visibility: hidden;
}
.selectImage{
    color: #00000085;
    padding-left: 5px;
    float: left;
    padding-right: 10px;
    padding-top: 4px;
}
.selectIcon{
    color: #00000085;
    padding-left: 5px;
    float: left;
    padding-right: 10px;
    padding-top: 4px;
}
.close-btn:hover{
  cursor:pointer;
}
</style>