我有一个组件，用户可以在其中上传图像，我还想添加一个删除图像的功能。 我添加了一个按钮，该按钮可删除当前图像，但是它的问题在于表单也正在提交，因此我想避免这种情况。 我只需要删除当前图像(如果存在)。 这是脚本：

+

           

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。只是没有上传同一张图片，可能是因为该文件已经处于选定状态。仍在调试，因为这也会在以后影响我的应用程序，如果可以找到办法，我会回来的。

是的，就是那个问题！感谢你的付出！