多图片上传转Base64后重复显示同一图片问题求助

你的代码存在两个核心问题导致重复显示最后一张图片：

1. 固定处理单个文件：uploadImage函数里始终读取event.target.files[0]，不管循环多少次，都只处理选中的第一个文件；再加上循环用var声明变量，异步场景下变量值会提前变成循环结束后的最终值，最终导致重复显示最后一个文件。
2. 循环索引逻辑错误：循环从index=1开始，但FileList是0索引的数组，遍历范围不符合规范。

步骤1：重构uploadImage函数 #

让函数直接接收File对象和目标容器ID，避免依赖事件对象重复读取文件，同时移除重复的ID属性（多个元素用同一ID违反HTML规范）：

const uploadImage = async (file, containerId) => {
    const base64 = await convertBase64(file);
    document.getElementById(containerId).innerHTML += `<img src="${base64}" class="img-thumbnail m-2" style="height: 50px;" />`;
};

步骤2：修正change事件的循环逻辑 #

用let声明循环变量避免异步变量提升问题，遍历所有选中的文件并逐个传入uploadImage：

document.getElementById("product_photo_1").addEventListener("change", (event) => {
    const files = event.target.files;
    const containerId = "product_photo_1_result";
    for(let index = 0; index < files.length; index++) {
        uploadImage(files[index], containerId);
    }
});

document.getElementById("product_photo_2").addEventListener("change", (event) => {
    const files = event.target.files;
    const containerId = "product_photo_2_result";
    for(let index = 0; index < files.length; index++) {
        uploadImage(files[index], containerId);
    }
});

完整修复代码 #

<div class="form-group">
    <label for="product_photo_1">Photos 1</label>
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="product_photo_1" multiple />
        <label class="custom-file-label" for="product_photo_1" data-browse="Select">Please, select a file...</label>
    </div>
    <div id="product_photo_1_result"></div>
</div>
<div class="form-group">
    <label for="product_photo_2">Photos 2</label>
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="product_photo_2" multiple />
        <label class="custom-file-label" for="product_photo_2" data-browse="Select">Please, select a file...</label>
    </div>
    <div id="product_photo_2_result"></div>
</div>
<script>
    const convertBase64 = (file) => {
        return new Promise((resolve, reject) => {
            const fileReader = new FileReader();

            fileReader.readAsDataURL(file);

            fileReader.onload = () => {
                resolve(fileReader.result);
            };

            fileReader.onerror = (error) => {
                reject(error);
            };
        });
    };

    const uploadImage = async (file, containerId) => {
        const base64 = await convertBase64(file);
        document.getElementById(containerId).innerHTML += `<img src="${base64}" class="img-thumbnail m-2" style="height: 50px;" />`;
    };

    document.getElementById("product_photo_1").addEventListener("change", (event) => {
        const files = event.target.files;
        const containerId = "product_photo_1_result";
        for(let index = 0; index < files.length; index++) {
            uploadImage(files[index], containerId);
        }
    });

    document.getElementById("product_photo_2").addEventListener("change", (event) => {
        const files = event.target.files;
        const containerId = "product_photo_2_result";
        for(let index = 0; index < files.length; index++) {
            uploadImage(files[index], containerId);
        }
    });
</script>

• 给所有图片上传输入框添加统一class（比如product-photo-input），批量绑定事件，减少冗余代码
• 每次选择新文件前清空预览容器，避免重复添加同一批图片

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