Vue - Taste auf Klick sendet ein Formular

Question

Ich habe eine Komponente, wo ein Benutzer ein Bild hochladen kann, und ich möchte auch eine Funktion zum Entfernen eines Bildes hinzufügen. Ich habe eine Schaltfläche hinzugefügt, die das aktuelle Bild entfernt, aber das Problem dabei ist, dass das Formular ebenfalls gesendet wird, und das möchte ich vermeiden. Ich muss nur das aktuelle Bild entfernen, wenn es existiert. Dies ist das Skript:

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

ich bei der Platzierung event.preventDefault() im removeImage Methode versucht, aber dann, wenn ich nach dem Bild zu entfernen versuchen, das gleiche laden wieder wird es nicht hochgeladen werden. Nicht sicher, was ich dagegen tun soll?

Answer 1

Wenn Sie eine Schaltfläche in einem Formular haben, hat sie den Standardtyp "Senden". Um zu verhindern, dass nicht passiert, werden Sie type="button" gesetzt haben, wie folgt:

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

Referenz: Can I make a <button> not submit a form?

Edit: Lösung für das zweite Problem erwähnt in den Kommentaren # 1 bis # 5

Bitte ändern Sie Ihre reader.onload Funktion wie folgt:

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

Wie Sie sehen können, drucke ich ein Konsolenprotokoll zum Debuggen aus (das Sie entfernen können) und fährt fort, alle Dateieingaben auszuwählen und ihren Wert zurückzusetzen. Dies löscht die ausgewählte Datei.

Hinweis: Diese Löschfunktion wird ausgeführt, nachdem die Datei in den Speicher eingelesen wurde. Wenn Sie es auf Entfernen Funktion möchten, können Sie wie folgt vorgehen:

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

haben die Wahl, ob Sie den Dateinamen löschen möchten, nachdem in den Speicher zu lesen oder wenn Sie wollen, es zu halten auf dem Bildschirm. Lass mich wissen ob es funktioniert!

Noch ein Hinweis: Wenn Sie eine andere <input type="file"> in Ihrer App haben, wird auch das gelöscht werden. Aber ich nehme an, Sie hätten es in den Speicher eingelesen und in einigen lokalen Variablen gespeichert. Um dies zu vermeiden, müssen Sie die Funktion document.querySelectorAll so ändern, dass nur die relevante Eingabe durch Angabe einer Klasse oder ID angesprochen wird.