Vue - 点击按钮提交表格

Question

我有一个组件，用户可以上传图片，我也想添加一个删除图片的功能。我添加了一个删除当前图像的按钮，但问题在于表单也被提交，我想避免这种情况。我只需要删除当前图像，如果它存在。这是脚本：

<template> 
    <div class="Image-input"> 
     <div class="Image-input__input-wrapper"> 
      <h2>+</h2> 
      <input @change="previewThumbnail" class="Image-input__input" name="image" type="file"> 
     </div> 

     <div class="Image-input__image-wrapper"> 
      <i v-show="! imageSrc" class="icon fa fa-picture-o"></i> 
      <img v-show="imageSrc" class="Image-input__image" :src="imageSrc"> 
      <button v-show="imageSrc" @click="removeImage">Remove image</button> 
     </div> 
    </div> 
</template> 
<script> 
export default { 

    props: ['imageSrc'], 

    methods: { 
    previewThumbnail: function(event) { 
     var input = event.target; 

     if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     var vm = this; 

     reader.onload = function(e) { 
      vm.imageSrc = e.target.result; 
     } 

     reader.readAsDataURL(input.files[0]); 
     } 
    }, 
    removeImage: function removeImage(e) { 
     this.imageSrc = ''; 
    } 
    } 
} 
</script> 

我试图与放置event.preventDefault()在removeImage方法，但是呢，如果我删除的图像后尝试上载同一个再不会上传。不知道该怎么办？

Answer 1

如果您在表单中有一个按钮，它具有默认类型“submit”。为了防止这种情况发生，你必须设置type="button"如下：

<button type="button" v-show="imageSrc" @click="removeImage">Remove image</button> 

参考：Can I make a <button> not submit a form?

编辑：解决方案在评论＃1提到的＃5

第二个问题请修改您的reader.onload功能如下：

reader.onload = function(e) { 
    vm.imageSrc = e.target.result; 
    console.log("Clearing file input"); 
    document.querySelectorAll('input[type=file]').forEach(element => { 
     element.value = ""; 
    }); 
} 

正如您所看到的，我打印出一个控制台日志以进行调试（您可以将其删除），然后继续选择所有文件输入并重置其值。这将清除选定的文件。

注意：该清除功能发生在文件读入内存之后。如果你想它删除功能，你可以做如下：

removeImage: function removeImage(e) { 
    this.imageSrc = ""; 
    console.log("Clearing file input"); 
    document.querySelectorAll('input[type=file]').forEach(element => { 
     element.value = ""; 
    }); 
} 

选择是你的，无论你想读入内存，或者如果你想保持它在屏幕上后，清除文件名。让我知道它是否有效！

另一个注意事项：如果您的应用中有其他<input type="file">，即使这样也会被清除。但我认为你会将它读入内存并保存在一些局部变量中。为了避免这种情况，您需要修改document.querySelectorAll函数，通过给它一个类或ID来仅定位相关输入。