我有一個組件，用戶可以在其中上傳圖像，我還想添加一個刪除圖像的功能。 我添加了一個按鈕，該按鈕可刪除當前圖像，但是它的問題在于表單也正在提交，因此我想避免這種情況。 我只需要刪除當前圖像(如果存在)。 這是腳本：

+

? ? ? ? ? ?

Remove image

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 = '';

}

}

}

我嘗試將event.preventDefault()放在removeImage方法中，但是，如果我在刪除圖像后嘗試再次上傳相同的圖像，它將不會上傳。 不知道該怎么辦？

嘗試prevent事件修改器

在我刪除圖像并嘗試立即上傳相同的圖像之后，它仍然不會上傳。 其他所有方案均有效，只有這種方案無效。

您將能夠為該問題創建一個有效的JSfiddle嗎？

如果您在表單中有一個按鈕，則其默認類型為"提交"。為了防止這種情況的發生，您必須按如下所示設置type="button"：

Remove image

參考：我可以使不提交表單嗎？

編輯：對于注釋＃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 ="";

});

}

您是要選擇文件，是要在讀入內存后清除文件名，還是要在屏幕上保留文件名。讓我知道它是否有效！

另一個注意事項：如果您的應用程序中還有其他，則即使清除該內容也是如此。但是我假設您將其讀入內存并將其保存在某些局部變量中。為避免這種情況，您需要通過給document.querySelectorAll函數提供一個類或ID來修改它以僅將相關輸入作為目標。

是的，謝謝，那行得通！但是然后我又遇到了另一個問題，即刪除圖像并嘗試立即上傳相同的圖像后，它仍然無法上傳。其他所有方案均有效，只有這種方案無效。

是的，我可以在本地重現您的問題。我將您的代碼復制到本地文件中，并添加了console.log("Got new image");作為PreviewThumbnail()函數的第一行。在此，我可以驗證第二次嘗試未按預期進行。如果我能找到解決辦法的話，會回來的。

從我可以看到，舊文件仍然保持為"選擇"狀態，并顯示第一個文件名。我們需要的是一種在讀取圖像作為數據URL之后清除表單的方法。

是的，我不確定該怎么做，很不幸，我對javascript不太滿意。如果您有任何解決方案，我將非常感謝！無論如何謝謝！

這看起來非常有趣...我可以上傳完全不同的圖像，并且可以正常工作。上傳image1.png后，我可以刪除并上傳image2.png。刪除image2.png之后，我可以沒有任何問題地返回image1.png。只是沒有上傳同一張圖片，可能是因為該文件已經處于選定狀態。仍在調試，因為這也會在以后影響我的應用程序，如果可以找到辦法，我會回來的。

是的，就是那個問題！感謝你的付出！

總結

以上是生活随笔為你收集整理的vue点击按钮上传图片_关于javascript：Vue-点击按钮提交表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。