Javascript 上传多张图片并将它们转换为 base64

我正在try 创建一个表单，您可以在其中使用两个file输入上传多个图像，以Base64格式查看图像，然后使用jQuery的POST提交它们.问题是，当我 Select 3个不同的图像时，我只看到最后一个图像3次.我猜问题出在addEventListener号公路中的for号公路上--也许它不在正确的位置？

<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 (event, id) => {
        const file = event.target.files[0];

        const base64 = await convertBase64(file);

        document.getElementById("product_photo_" + id + "_result").innerHTML += '<img src="' + base64 + '" class="img-thumbnail m-2" id="product_photo_' + id + '[]" style="height: 50px;" />';
    };

    document.getElementById("product_photo_1").addEventListener("change", (event) => {
        for(var index = 1; index <= document.getElementById("product_photo_1").files.length; index++) {
            uploadImage(event, 1);
        }
    });

    document.getElementById("product_photo_2").addEventListener("change", (event) => {
        for(var index = 1; index <= document.getElementById("product_photo_2").files.length; index++) {
            uploadImage(event, 2);
        }
    });
</script>