获取用户提交的图片失败

Question

我在nodejs中使用multer来获取用户提交的图片，将其保存在项目根目录的uploads文件夹中，但是在apifox中测试出现如下问题：

以下是写的代码

const express = require('express');
const multer = require('multer');
const path = require('path');
const router = express.Router();
const { Feedback } = require('../models');

// 设置存储路径和文件名
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/');
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
    }
});

// 使用Multer中间件配置上传
const upload = multer({ storage: storage });

// 创建新的feedback
router.post('/', upload.single('image'), async function (req, res) {
    try {
        // 查看请求体
        console.log(req.body);

        // 自动获取当前登录用户的信息
        const phone = req.phone;
        const username = req.username;
        const leixing = req.body.leixing; // 用户自己填写的信息
        const qiangdu = req.body.qiangdu; // 用户自己填写的信息
        const nr = req.body.nr; // 用户自己填写的信息

        const liulanqi = req.body.liulanqi; // 自动获取浏览器类型
        const createdAt = new Date(); // 自动获取当前时间

        // 获取上传的图片路径
        const imagePath = req.file ? req.file.path : null;

        // 验证数据
        if (!nr || !leixing || !qiangdu) {
            return res.status(400).json({
                status: false,
                message: '请填写所有必填项'
            });
        }

        // 创建新的feedback
        const newFeedback = await Feedback.create({
            username: username,
            phone: phone,
            nr: nr,
            leixing: leixing,
            qiangdu: qiangdu,
            liulanqi: liulanqi,
            imagePath: imagePath, // 保存图片路径
            createdAt: createdAt
        });

        res.json({
            status: true,
            message: '反馈创建成功',
            data: newFeedback
        });
    } catch (error) {
        res.status(500).json({
            status: false,
            message: '反馈创建失败',
            errors: [error.message]
        });
    }
});

module.exports = router;

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

从给出的错误信息和代码中，可以看到在提交表单时遇到了一个“MulterError: Unexpected field”的错误这通常是由于提交的表单字段与期望的字段不匹配导致的在Multer中，如果你使用multer.single('image')中间件，它期望表单中有一个名为'image'的文件字段从你给出的错误信息来看，可能是实际提交的表单中有一个不同的文件名字段名，导致了这个错误

请检查以下几点来解决这个问题：

1. 确保在前端表单中文件输入字段的名称是'image'，并且与后端代码中的upload.single('image')匹配
2. 确保没有额外的文件字段或多个文件字段被提交
3. 如果你正在使用客户端库或框架来上传文件，确保它们正确地设置了文件字段的名称

如果以上都没有问题，请检查是否有其他代码或中间件干扰了文件上传过程此外，也可以尝试在上传前打印完整的请求体（console.log(req.body)和console.log(req.files)），以查看提交的所有字段和文件，以便进一步调试问题

最后，如果仍然无法解决问题，请提供更多关于前端代码和表单提交的信息，以便更准确地定位问题所在