如何上传1张图片+转换为base64 +在同一个HTML页面上多次使用相同的ID显示相同的图片？

要实现如何上传一张图片并转换为base64，在同一个HTML页面上多次使用相同的ID显示相同的图片，可以按照以下步骤进行操作：

创建一个HTML页面，并包含一个用于上传图片的输入框和一个用于显示图片的元素。

<!DOCTYPE html>
<html>
<head>
    <title>图片上传</title>
</head>
<body>
    <input type="file" id="imageInput">
    <img id="imageDisplay" src="" alt="上传的图片">
</body>
</html>

使用JavaScript监听图片上传框的变化，并读取选中的图片文件。

window.onload = function() {
    var imageInput = document.getElementById('imageInput');
    var imageDisplay = document.getElementById('imageDisplay');

    imageInput.addEventListener('change', function() {
        var file = imageInput.files[0];
        
        // 在这里进行图片文件的转换为base64操作
    });
}

将选中的图片文件转换为base64编码。

var fileReader = new FileReader();
fileReader.onload = function() {
    var base64Image = fileReader.result;
    imageDisplay.src = base64Image;
};
fileReader.readAsDataURL(file);

将转换后的base64图片设置为显示图片的元素的src属性值。

imageDisplay.src = base64Image;

如果需要在同一个HTML页面上多次使用相同的ID显示相同的图片，可以通过创建多个显示图片的元素，并将它们的src属性值设置为相同的base64图片数据。

<img class="imageDisplay" src="" alt="上传的图片">
<img class="imageDisplay" src="" alt="上传的图片">
<img class="imageDisplay" src="" alt="上传的图片">

var imageDisplays = document.getElementsByClassName('imageDisplay');
for (var i = 0; i < imageDisplays.length; i++) {
    imageDisplays[i].src = base64Image;
}

通过以上步骤，您可以实现上传一张图片并转换为base64，在同一个HTML页面上多次使用相同的ID显示相同的图片。请注意，代码示例中的base64Image变量是指转换后的base64图片数据。在实际应用中，您可能还需要添加一些错误处理和安全验证的代码。