动态幻灯片项目中选择/拍摄图片需重复操作的问题求助

我正在开发一个**Dynamic Slideshow（动态幻灯片）**项目，计划通过Python脚本展示指定目录中的图片，同时用基于原生HTML/CSS/JavaScript的简易界面添加新图片。

界面使用<input id="image-input" type="file" accept="image/*" onchange="showPreview()">元素获取图片输入，但偶尔会出现需重复选择或拍摄图片多次才能成功的情况，有时还会弹出类似「上一操作存储空间不足」的错误。该问题随机出现，无法稳定复现，且与图片类型、大小无关，仅发现使用相机拍摄图片时大多需操作两次才成功，第二次操作则正常。

关联代码 #

以下是showPreview()函数的代码：

/**
 * Show a preview of the image
 */
function showPreview() {
    // get the input element and select the first image
    const input = document.getElementById("image-input");
    const image = input.files[0];
    // get the preview image and set the src attribute
    const imgTag = document.getElementById("preview");
    imgTag.src = URL.createObjectURL(image);
    // show submit button
    const submitButton = document.getElementById("submit-btn");
    submitButton.style.visibility = "visible";
}

内容的提问来源于stack exchange，提问作者grafj73