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 = "";
    });
}

如您所见，我正在打印控制台日志以进行调试（您可以将其删除），然后继续 select 所有文件输入并重置其值。这会清除 selected 文件。

注意：这个清除函数发生在文件读入内存之后。如果你想在移除功能上使用它，你可以这样做：

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 函数，通过给它一个 class 或 id 来仅针对相关输入。

Vue - 单击按钮提交表单

Vue - button on click submits a form

javascript

vue.js