使用FilePond保存多张图片时JSON语法错误的解决咨询

问题根源 #

启用multiple多选后，前端会以数组形式提交多张图片数据，但你的后端代码仅处理单张图片的单个JSON字符串，直接对数组执行JSON.parse()会抛出语法错误（数组并非合法的单个JSON字符串）。同时你的Mongoose Schema仅支持存储单张图片，无法容纳多图数据。

修复步骤 #

1. 修改Mongoose Schema以支持多图存储 #

将单字段改为数组类型，用来存储多张图片的Buffer和MIME类型：

const CPASchema = new mongoose.Schema({
    // 其他字段保持不变...
    imageAnswer: [{  // 修改为数组
        type: Buffer
    }],
    imageAnswerType: [{  // 修改为数组
        type: String
    }],
    // 其他字段保持不变...
});

// 添加多图路径虚拟属性（替换原有的coverImagePath）
CPASchema.virtual('coverImagePaths').get(function() {
    if (this.imageAnswer?.length && this.imageAnswerType?.length) {
        return this.imageAnswer.map((imgBuffer, index) => {
            return `data:${this.imageAnswerType[index]};charset=utf-8;base64,${imgBuffer.toString('base64')}`;
        });
    }
    return [];
});

2. 调整后端图片保存逻辑以处理数组 #

修改saveImageAnswer函数，支持遍历多张图片数据：

// 确保已定义imageMimeTypes（示例：const imageMimeTypes = ['image/jpeg', 'image/png', 'image/gif']）
function saveImageAnswer(newCPA, coverEncodedData) {
    // 空值处理
    if (!coverEncodedData) return;

    // 兼容单图/多图情况：统一转为数组
    const imageDataList = Array.isArray(coverEncodedData) ? coverEncodedData : [coverEncodedData];

    imageDataList.forEach(encodedStr => {
        try {
            const img = JSON.parse(encodedStr);
            if (img?.type && imageMimeTypes.includes(img.type)) {
                newCPA.imageAnswer.push(Buffer.from(img.data, 'base64'));
                newCPA.imageAnswerType.push(img.type);
            }
        } catch (err) {
            console.error(`解析图片数据失败: ${err.message}`);
        }
    });
}

3. 确保Express能解析数组格式的表单数据 #

检查你的Express配置，确保启用了extended: true的urlencoded解析，这样才能正确接收数组类型的表单参数：

const express = require('express');
const app = express();

// 必须配置extended: true以支持数组和嵌套对象解析
app.use(express.urlencoded({ extended: true }));

前端渲染多图 #

当需要展示图片时，遍历虚拟属性coverImagePaths即可：

<!-- 示例：EJS模板中渲染多图 -->
<% if (cpa.coverImagePaths.length) { %>
    <% cpa.coverImagePaths.forEach(path => { %>
        <img src="<%= path %>" alt="Answer Image">
    <% }) %>
<% } %>

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