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

如果表单中有一个按钮,则它具有默认类型"提交".为防止这种情况发生,您必须设置type="button"如下:

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

参考:我可以让<按钮>不提交表格吗？

编辑:注释#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 来修改函数以仅定位相关输入.