React+Express中Multer无法上传图片且createProduct回调不执行求助

问题背景 #

作为React和编程新手，尝试通过Postman或React向Express后端发送POST请求，将图片上传至已配置的Amazon S3存储桶。此前代码可正常运行，但调整后，Multer不再将文件上传至uploads目录，createProduct回调函数也未执行，无日志输出和错误提示。

相关代码 #

React端代码 #

表单提交与文件选择

const handleSubmit = async(e) => {
    e.preventDefault()
    const formData = new FormData();
    formData.append("title", title)
    formData.append("price", price)
    formData.append("images", images)
    formData.append("description", description)
    formData.append("sellerId", sellerId)
    console.log(...formData)

    const response = await fetch('/api/products/', {
        method: 'POST',
        body: formData,
        header: {
            "Content-Type": "multipart/form-data"
        }
    })
    const json = await response.json()
}

const fileSelected = event => {
    const file = event.target.files[0]
    setImages(file)
}

Express后端代码 #

全局路由配置

//Product Routes
app.use('/api/products', productRoutes) 

产品路由文件

const express = require('express')
const Product = require('../models/productModel')
const multer = require('multer')
const upload = multer({ dest: 'uploads/' })
const {
    createProduct,
    getProducts,
    getProduct,
    deleteProduct,
    updateProduct,
    getProductsBySellerId,
    getImageByKey
} = require('../controller/productController')

const router = express.Router()

//POST and create new product
router.post('/', upload.single('images'), createProduct)

创建产品控制器

const createProduct = async(req, res) => {
    console.log("calling create product")
    const file = req.file
    console.log(file)

    const result = await uploadFile(file)
    console.log(result)
    const {title, price, description, tags, stock, ordered, customerId, sellerId} = req.body
    let emptyFeilds = []

    if(!title) {
        emptyFeilds.push('title')
    }
    if(!price) {
        emptyFeilds.push('price')
    }
    // if(!images) {
    //     emptyFeilds.push('images')
    // }
    if(!description) {
        emptyFeilds.push('description')
    }
    if (emptyFeilds.length > 0) {
        return res.status(400).json({error: 'Please fill in all feilds', emptyFeilds})
    }

    //Add product to DB
    try {
        const product = await Product.create({title, images: `/productImages/${result.Key}`, price,  description, tags, stock, ordered, customerId, sellerId})
        res.json(product)
    } catch(error) {
        res.status(400).json({error: error.message})
    }
}

排查步骤 #

1. 修复React端fetch的关键错误 #

• 拼写错误：header改为headers（复数形式），否则请求头无法被正确识别
• 移除手动设置的Content-Type：使用FormData时，浏览器会自动生成带boundary的multipart/form-data请求头，手动设置会丢失boundary参数，导致后端无法解析表单。修改后代码：

const response = await fetch('/api/products/', {
    method: 'POST',
    body: formData
})

2. 确保uploads目录存在 #

Multer不会自动创建uploads/目录，目录不存在会导致文件上传静默失败。在项目根目录手动创建uploads文件夹，或者添加自动创建逻辑：

const fs = require('fs');
const uploadDir = './uploads';
if (!fs.existsSync(uploadDir)) {
    fs.mkdirSync(uploadDir);
}
const upload = multer({ dest: uploadDir })

3. 为Multer添加错误捕获 #

Multer的错误（如文件大小超限、目录不存在）不会自动传递到后续中间件，需手动捕获：

router.post('/', (req, res, next) => {
    upload.single('images')(req, res, (err) => {
        if (err) {
            console.error('Multer错误:', err);
            return res.status(400).json({ error: err.message });
        }
        next();
    });
}, createProduct);

4. 给uploadFile添加异常处理 #

await uploadFile(file)如果抛出错误，会直接中断函数且无日志，需包裹try-catch：

let result;
try {
    result = await uploadFile(file);
    console.log(result);
} catch (uploadError) {
    console.error('S3上传错误:', uploadError);
    return res.status(500).json({ error: '文件上传到S3失败' });
}

5. 验证Postman请求格式 #

用Postman测试时需确保：

• 请求方法为POST，URL正确
• Body选择form-data类型
• images键选择File类型并上传实际文件
• 其他字段（title、price等）选择Text类型并填写有效值

6. 添加后端请求调试日志 #

在路由最前面添加调试中间件，确认请求是否到达后端：

router.post('/', (req, res, next) => {
    console.log('产品路由已收到请求');
    next();
}, upload.single('images'), createProduct);

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