javascript
vue点击按钮上传图片_关于javascript:Vue-点击按钮提交表单
我有一個(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)題。
- 上一篇: ai圆角插件_【干货满满】AI软件技巧排
- 下一篇: for循环里面有异步操作_JS 线程与异