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

Posted 2023-02-22

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

【英文标题】：How to make input type file null on removing image in vue?

【发布时间】：2019-11-26 04:19:51

【问题描述】：

我有一个表单，我需要上传一张图片，一切正常，但问题是当我删除图片并再次上传相同的图片时，文件@change 函数没有被触发。我无法使文件值为空

我尝试在删除图像时更改 this.$refs.fileInput.type 并将 ref 文件设置为空，甚至将值设置为空

<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"   
    @click="onPickFile">
                   </v-badge>
                    <img v-if="!certificateImage" 
   src="https://imgplaceholder.com/640x360"   @click="onPickFile">
                    <input type="file" style="display:none" 
ref="fileInput" id="fileInput" accept="image/*" @change="onFilePicked">

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

</template>

<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>

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

【问题讨论】：

解决了我使用了错误的参考，现在它的工作。

请将其发布为您自己的答案

【参考方案1】：

解决了我使用了错误的参考，现在它的工作。

【参考方案2】：

试试这个：

...
 methods: 
   removeImage () 
      document.querySelector('#fileInput').value = ''
   
 
...