Node.js Multer如何在Postman中上传带自定义字段的图片数组

问题本质 #

你当前的代码存在两个核心问题：一是Multer的图片类型验证逻辑错误，二是混淆了文件与表单字段的存储位置——multer.array('images')会把上传的文件存入req.files而非req.body，同时自定义字段需要按数组格式与文件顺序关联，才能实现“每个图片对应一个imageType”的需求。

修正后的Node.js代码 #

1. 修复Multer存储配置的类型验证 #

const FILE_TYPE_MAP_image = {
    'image/png': 'png',
    'image/jpeg': 'jpeg',
    'image/jpg': 'jpg'
};

let uploadError = null;
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        // 正确验证图片类型
        const isValid = FILE_TYPE_MAP_image[file.mimetype];
        if (!isValid) {
            uploadError = new Error('invalid image type');
        } else {
            uploadError = null;
        }
        cb(uploadError, 'public/uploads');
    },

    filename: function (req, file, cb) {
        const fileName = file.originalname.split(' ').join('-');
        const extension = FILE_TYPE_MAP_image[file.mimetype];
        cb(null, `${fileName}-${Date.now()}.${extension}`);
    }
})
const uploadOptions = multer({ storage: storage });

2. 调整接口逻辑，关联文件与自定义字段 #

const createalbum = async (req, res) => {
    // 处理类型验证错误
    if (uploadError) {
        return res.status(400).send({ message: uploadError.message });
    }
    // 校验是否有文件上传
    if (!req.files || req.files.length === 0) {
        return res.status(400).send({ message: 'No images uploaded' });
    }

    const listofdata = [];
    const basePath = `${req.protocol}://${req.get('host')}/public/uploads/`;
    // 获取自定义字段数组（与文件顺序对应）
    const uploadTypes = req.body.uploadType || [];

    // 遍历文件，关联对应位置的自定义字段
    req.files.forEach((file, index) => {
        listofdata.push({
            url: `${basePath}${file.filename}`,
            uploadType: uploadTypes[index] || 'default', // 可选：设置默认值
        })
    });

    console.log(listofdata);
    // 此处可添加数据库存储等业务逻辑
    res.status(200).send({ data: listofdata });
}

module.exports = {
    createalbum: [uploadOptions.array('images', 10), createalbum]
};

Postman正确请求方式 #

1. 请求方法设为POST，填写你的API接口地址
2. 切换到Body标签，选择form-data格式
3. 添加文件字段：
   • 字段名填images，类型选择File，选择要上传的图片；重复此步骤添加多个图片（最多10个）
4. 添加自定义字段：
   • 字段名填uploadType[]，类型选择Text，填写对应第一个图片的类型值；重复此步骤，每个uploadType[]条目对应一个图片，顺序必须和文件的上传顺序一致
5. 发送请求，后端即可正确关联每个图片与对应的自定义字段

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