使用FileReader读取图片存入对象数组时图片路径undefined问题

需求与问题描述 #

需求：通过type="file"输入框获取图片，结合type="text"输入框的其他信息生成卡片。
问题：将图片src数据推入imgArrForPush数组时一切正常，但把该数组存入cardArr的对象后，渲染卡片时图片路径变为undefined，浏览器报错：undefined:1 GET http://127.0.0.1:5500/undefined 404 (Not Found)。认为页面全局CSS影响不大，卡片CSS可能相关，代码使用FontAwesome图标。期望cardArr的结构为：

cardArr = [{
    imgNameInput:"图片名称",
    districtInput:"区域",
    areaInput:"250",
    roomsInput:"3",
    floorInput:"5",
    numberOfFloorsInput:"10",
    priceInput:"30000",
    adressInput:"地址",
    images:["图片路径1","图片路径2","图片路径3"]
}]

问题排查与解决方案 #

1. 解决数组引用导致的数据丢失问题

如果imgArrForPush是全局数组，直接赋值给cardArr对象的images属性时，传递的是数组引用而非副本。后续重置或修改imgArrForPush会同步影响已存入cardArr的对象，导致渲染时路径丢失。

修复代码：

// 不要直接赋值：images: imgArrForPush
// 改用数组副本：
images: [...imgArrForPush] // 或者 imgArrForPush.slice()

2. 修正FileReader异步读取的时序问题

读取本地图片依赖FileReader的异步操作，如果在所有图片读取完成前就将imgArrForPush存入cardArr，会导致数组内的路径未被正确写入。

修复代码：用Promise批量处理异步读取，确保所有图片路径就绪后再存入数组：

function readImages(files) {
    return Promise.all(Array.from(files).map(file => {
        return new Promise((resolve) => {
            const reader = new FileReader();
            reader.onload = (e) => resolve(e.target.result); // 获取图片DataURL
            reader.readAsDataURL(file);
        });
    }));
}

// 调用示例
document.querySelector('#add-card-btn').addEventListener('click', async () => {
    const fileInput = document.querySelector('input[type="file"]');
    const imgPaths = await readImages(fileInput.files);
    
    // 存入cardArr
    cardArr.push({
        imgNameInput: document.querySelector('#img-name').value,
        districtInput: document.querySelector('#district').value,
        // 其他输入框数据...
        images: imgPaths
    });

    // 执行渲染
    renderCards();
});

3. 修复渲染逻辑的边界检查缺失

渲染卡片时如果没有检查images数组元素是否存在，遍历到空值会导致src为undefined。

修复代码：

function renderCards() {
    const container = document.getElementById('card-container');
    container.innerHTML = '';
    
    cardArr.forEach(card => {
        const cardDiv = document.createElement('div');
        cardDiv.className = 'card';
        
        // 渲染其他信息
        cardDiv.innerHTML += `<h4>${card.imgNameInput}</h4><p>区域：${card.districtInput}</p>`;
        
        // 渲染图片
        const imgWrap = document.createElement('div');
        imgWrap.className = 'card-imgs';
        card.images.forEach(src => {
            if (src) { // 检查路径是否有效
                const img = document.createElement('img');
                img.src = src;
                img.alt = card.imgNameInput;
                imgWrap.appendChild(img);
            }
        });
        cardDiv.appendChild(imgWrap);
        container.appendChild(cardDiv);
    });
}

4. 排除卡片CSS的干扰

临时移除卡片相关CSS，测试图片是否能正常显示——如果移除后图片出现，说明CSS设置了display: none、opacity: 0或错误的尺寸，导致视觉上看似路径错误。

完整示例代码 #

<!-- HTML -->
<input type="file" id="img-input" multiple>
<input type="text" id="img-name" placeholder="图片名称">
<input type="text" id="district" placeholder="区域">
<button id="add-card">生成卡片</button>
<div id="card-container"></div>

// JavaScript
let cardArr = [];

document.getElementById('add-card').addEventListener('click', async () => {
    const fileInput = document.getElementById('img-input');
    const imgName = document.getElementById('img-name').value;
    const district = document.getElementById('district').value;
    
    const imgPaths = await readImages(fileInput.files);
    if (!imgPaths.length) {
        alert('请选择图片');
        return;
    }

    cardArr.push({
        imgNameInput: imgName,
        districtInput: district,
        images: [...imgPaths]
    });

    renderCards();
    // 重置输入框
    fileInput.value = '';
    document.getElementById('img-name').value = '';
    document.getElementById('district').value = '';
});

function readImages(files) {
    return Promise.all(Array.from(files).map(file => {
        return new Promise((resolve) => {
            const reader = new FileReader();
            reader.onload = (e) => resolve(e.target.result);
            reader.readAsDataURL(file);
        });
    }));
}

function renderCards() {
    const container = document.getElementById('card-container');
    container.innerHTML = '';
    cardArr.forEach(card => {
        const cardDiv = document.createElement('div');
        cardDiv.className = 'card';
        cardDiv.innerHTML += `<h3>${card.imgNameInput}</h3><p>区域：${card.districtInput}</p>`;
        
        const imgContainer = document.createElement('div');
        imgContainer.className = 'card-images';
        card.images.forEach(src => {
            if (src) {
                const img = document.createElement('img');
                img.src = src;
                img.alt = card.imgNameInput;
                imgContainer.appendChild(img);
            }
        });
        cardDiv.appendChild(imgContainer);
        container.appendChild(cardDiv);
    });
}

/* 卡片CSS */
.card {
    border: 1px solid #eee;
    padding: 1rem;
    margin: 1rem;
    border-radius: 8px;
}
.card-images {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}
.card-images img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
}

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