使用Multer上传产品图片时遇空对象及路径读取错误

前端FormData中image为有效File对象，但后端req.file始终为undefined，req.body里的image是空对象，导致调用req.file!.path时报错。结合你的代码，给出以下排查和修复方案：

1. 修正前端请求的Content-Type设置 #

发送FormData时，禁止手动设置Content-Type，浏览器会自动添加multipart/form-data并携带正确的boundary标识。如果手动设置该头，会丢失boundary信息，导致后端无法解析文件。

检查你的createProduct接口请求代码，确保没有类似以下错误设置：

// 错误示例：不要手动设置Content-Type
axios.post('/api/products', productData, {
  headers: { 'Content-Type': 'multipart/form-data' }
})

正确做法：直接传递FormData即可，无需额外设置headers。

2. 修复multer的fileFilter逻辑 #

你的fileFilter存在逻辑错误：先调用callback(null,false)拒绝文件，随后又抛出错误，导致multer执行两次回调，可能引发解析异常。修改为：

fileFilter:(req:Request,file:Express.Multer.File,callback:FileFilterCallback)=>{
    const allowedTypes = ["image/png", "image/jpg", "image/jpeg", "video/mp4"];
    if(allowedTypes.includes(file.mimetype)){
        callback(null, true);
    } else{
        callback(new Error("Only .png, .jpg, .jpeg, .mp4 allowed"));
    }
},

3. 确保中间件顺序与冲突排查 #

• 确认你的Express应用没有使用bodyParser.urlencoded或bodyParser.json处理multipart/form-data请求，这类中间件会优先解析请求体，导致multer无法获取文件。
• 路由中间件顺序无需调整（upload.single('image')在verifyTokenAndAdmin之前或之后不影响文件解析），但要确保没有其他拦截请求体的中间件。

4. 优化FormData的文件追加方式 #

前端追加文件时，可明确指定文件名（非必须，但能避免部分解析异常）：

productData.append('image', fileData.image!, fileData.image!.name);

5. 修正cloudinary上传的异步问题 #

你的cloudinary上传是异步操作，必须添加await，否则uploadResult是Promise对象，直接访问public_id会得到undefined：

const uploadResult = await cloudinary.uploader.upload(req.file!.path,{
    upload_preset: "webshop_ts_mern",
    resource_type: "auto",
})

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