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

+

? ? ? ? ? ?

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方法中，但是，如果我在刪除圖像后嘗試再次上傳相同的圖像，它將不會(huì)上傳。 不知道該怎么辦？

嘗試prevent事件修改器

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

您將能夠?yàn)樵搯?wèn)題創(chuàng)建一個(gè)有效的JSfiddle嗎？

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

Remove image

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

編輯：對(duì)于注釋＃1至＃5中提到的第二個(gè)問(wèn)題的解決方案

請(qǐng)按如下所示修改您的reader.onload函數(shù)：

reader.onload = function(e) {

vm.imageSrc = e.target.result;

console.log("Clearing file input");

document.querySelectorAll('input[type=file]').forEach(element => {

element.value ="";

});

}

如您所見，我正在打印控制臺(tái)日志以進(jìn)行調(diào)試(可以刪除)，然后繼續(xù)選擇所有文件輸入并重置其值。這將清除所選文件。

注意：此清除功能在文件讀入內(nèi)存后發(fā)生。如果要使用刪除功能，可以執(zhí)行以下操作：

removeImage: function removeImage(e) {

this.imageSrc ="";

console.log("Clearing file input");

document.querySelectorAll('input[type=file]').forEach(element => {

element.value ="";

});

}

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

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

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

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

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

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

這看起來(lái)非常有趣...我可以上傳完全不同的圖像，并且可以正常工作。上傳image1.png后，我可以刪除并上傳image2.png。刪除image2.png之后，我可以沒(méi)有任何問(wèn)題地返回image1.png。只是沒(méi)有上傳同一張圖片，可能是因?yàn)樵撐募呀?jīng)處于選定狀態(tài)。仍在調(diào)試，因?yàn)檫@也會(huì)在以后影響我的應(yīng)用程序，如果可以找到辦法，我會(huì)回來(lái)的。

是的，就是那個(gè)問(wèn)題！感謝你的付出！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。