多图片上传表单仅保存最后一张图片信息的问题解决

问题说明 #

表单支持多图片上传，点击按钮提取图片EXIF信息并保存到数组，但仅能保留最后一张图片的信息，之前上传的图片信息丢失，问题出在loadFile函数。

错误原因 #

1. 错误存储对象：loadFile中每次循环都将同一个file input元素推入myImages数组，而非单独的File对象。当用户多次选择文件时，input的files列表会被覆盖为最后一次选择的文件，导致之前的文件信息丢失；即使一次选择多个文件，数组中存储的也是重复的input引用，后续处理无法区分不同文件。
2. 固定读取第一个文件：saveImage中始终读取el.files[0]，无法遍历所有上传的文件。

修正后的代码 #

index.html（无需修改） #

<html>
<head>
    <title>Coords Images</title>
    <script type="text/javascript" src="functions.js"></script>
    <script src="exif.min.js"></script>
</head>
<body>
    <p><input multiple type="file" accept="image/*" name="image" id="image" onchange="loadFile(event)" style=""></p>
    <input type="submit" onclick="saveImage()" />
    <p class="cont" id="preview"></p>
</body>
</html>

functions.js（修正版） #

var myImages = [];
var arrayInfo = [];

function saveImage() {
    // 清空数组避免重复存储
    arrayInfo = [];
    myImages.forEach(file => {
        EXIF.getData(file, function() {
            if (Object.keys(this.exifdata).length > 0) {
                const foundLatLong = generate_lat_lang(this);
                arrayInfo.push(foundLatLong);
                console.log("已保存图片信息:", foundLatLong);
            } else {
                noDataAvailable();
            }
        });
    });
    console.log("所有图片信息:", arrayInfo);
}

function loadFile(event) {
    const files = event.target.files;
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        // 存储单个File对象而非input元素
        myImages.push(file);
        
        // 创建预览图片，使用动态id避免重复
        const image = document.createElement('img');
        image.src = URL.createObjectURL(file);
        image.id = `output-${i}`;
        image.width = "200";
        document.querySelector(".cont").appendChild(image);
    }
}

function generate_lat_lang(imageData = '') {
    let latitudine = 0;
    let longitudine = 0;
    const imageInfo = {
        name: imageData.name,
        latitudine: 0,
        longitudine: 0
    };
    
    // 先判断是否存在GPS数据，避免报错
    if (imageData.exifdata?.GPSLatitude && imageData.exifdata?.GPSLongitude) {
        // 计算纬度
        const latDegree = imageData.exifdata.GPSLatitude[0].numerator;
        const latMinute = imageData.exifdata.GPSLatitude[1].numerator;
        const latSecond = imageData.exifdata.GPSLatitude[2].numerator / imageData.exifdata.GPSLatitude[2].denominator;
        latitudine = (latDegree + (latMinute / 60) + (latSecond / 3600)).toFixed(8);
        
        // 计算经度
        const lonDegree = imageData.exifdata.GPSLongitude[0].numerator;
        const lonMinute = imageData.exifdata.GPSLongitude[1].numerator;
        const lonSecond = imageData.exifdata.GPSLongitude[2].numerator / imageData.exifdata.GPSLongitude[2].denominator;
        longitudine = (lonDegree + (lonMinute / 60) + (lonSecond / 3600)).toFixed(8);
    }
    
    imageInfo.latitudine = latitudine;
    imageInfo.longitudine = longitudine;
    return imageInfo;
}

// 补充无EXIF数据的处理函数
function noDataAvailable() {
    console.log("该图片无GPS或EXIF数据");
}

关键修正点 #

• 存储独立File对象：loadFile中直接将每个选中的File对象存入数组，确保每个元素都是独立的文件实例，不会被后续操作覆盖。
• 遍历处理每个文件：saveImage中直接遍历数组中的File对象，调用EXIF工具处理每个文件的信息。
• 避免重复ID：预览图片使用动态ID（output-${i}），保证DOM元素ID唯一，符合规范。
• 增加容错判断：在generate_lat_lang中先判断是否存在GPS数据，避免因无数据导致的报错。
• 清空重复数据：每次保存前清空arrayInfo，避免多次点击按钮导致重复存储。

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