本文详解如何在 react 前端通过 multipart/form-data 上传文件，并在 node.js/express 后端使用 multer 解析、保存文件路径，最终将文件元信息（如路径）连同其他字段一并写入 postgresql 数据库。
在当前实现中，文件未成功入库的根本原因在于：前端未以 multipart/form-data 格式提交文件，后端也未正确配置中间件解析文件上传请求。React 的 仅提供文件对象引用，但若直接将其作为普通 JSON 字段（如 { scanne_bon: File }）通过 axios.post() 发送，Axios 默认以 application/json 方式序列化——而 File 对象无法被 JSON 序列化，最终导致文件丢失且无报错。
✅ 正确做法：前后端协同处理文件上传
1. 前端：使用 FormData 构建多部分请求
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const formData = new FormData();
formData.append('fk_fournisseur', fk_fournisseur);
formData.append('acheteur', acheteur);
formData.append('type_bon', type_bon);
formData.append('recepteur', recepteur);
formData.append('livreur', livreur);
// ✅ 关键：文件必须通过 append() 添加，且 key 名需与后端 multer 配置一致（此处为 'bonScanner'）
if (bonScanner) {
formData.append('bonScanner', bonScanner); // 注意：不是 .name 或 .path，而是 File 实例
}
try {
const res = await axios.post('http://localhost:8080/process/ajouterBon', formData, {
headers: {
'Content-Type': 'multipart/form-data', // Axios 会自动设置 boundary，无需手动指定
},
});
console.log('✅ 文件与数据已成功提交:', res.data);
} catch (err) {
console.error('❌ 上传失败:', err);
}
};⚠️ 注意事项：不要对 formData 手动设置 Content-Type 头（Axios 会自动添加带 boundary 的正确头）；bonScanner 必须是原生 File 对象（来自 e.target.files[0]），不可转为字符串或 JSON；表单 enctype="multipart/form-data" 在 标签中非必需（FormData 已隐式处理）。
2. 后端：Multer 中间件 + 文件路径入库
需将原错误的「混合解析」逻辑（既读 req.files 又读 req.body）改为 统一由 Multer 解析整个请求：
// server.js 或 routes/process.js
const express = require('express');
const multer = require('multer');
const pool = require('../db'); // PostgreSQL 连接池
const router = express.Router();
// 配置 Multer 存储策略（推荐：磁盘存储 + 安全重命名）
const storage = multer.diskStorage({
destination: (req, file, cb) => cb(null, 'uploads/'), // 确保目录存在且有写权限
filename: (req, file, cb) => {
const ext = path.extname(file.originalname);
cb(null, `${Date.now()}-${Math.round(Math.random() * 1E9)}${ext}`);
},
});
const upload = multer({
storage,
limits: { fileSize: 50 * 1024 * 1024 }, // 50MB 限制
fileFilter: (req, file, cb) => {
if (file.mimetype.startsWith('image/') || file.originalname.endsWith('.pdf')) {
cb(null, true);
} else {
cb(new Error('仅支持图片或 PDF 文件'));
}
}
});
// ✅ 单一路由，Multer 自动解析所有字段（包括文本和文件）
router.post('/ajouterBon', upload.single('bonScanner'), async (req, res) => {
try {
const {
fk_fournisseur,
acheteur,
type_bon,
recepteur,
livreur
} = req.body;
const datee = new Date();
const heure = new Date().toLocaleTimeString('fr-FR', { hour12: false });
// ✅ 获取保存后的文件路径（相对或绝对，按需处理）
const scanne_bon_path = req.file ? req.file.path : null;
// 插入数据库（注意：scanne_bon 存路径，非二进制内容）
const query = `
INSERT INTO bon (
fk_fournisseur, acheteur, scanne_bon, type_bon, datee, heure, recepteur, livreur
) VALUES ($1, $2, $3, $4, $5, $6, $7, $8) RETURNING id_bon, recepteur, fk_fournisseur
`;
const values = [
fk_fournisseur,
acheteur,
scanne_bon_path, // ? 存储服务器上的文件路径
type_bon,
datee,
heure,
recepteur,
livreur
];
const result = await pool.query(query, values);
res.status(201).json(result.rows[0]);
} catch (error) {
console.error('DB Insert Error:', error);
res.status(500).json({ error: error.message || '服务器内部错误' });
}
});
module.exports = router;3. 数据库设计建议
确保 bon.scanne_bon 字段为 TEXT 类型（存储路径），不建议直接存二进制大对象（BLOB），除非业务强要求。路径方式更灵活、可扩展（例如后续可对接云存储、CDN）。
? 总结关键点
- ❌ 错误：用 JSON.stringify() 提交 File 对象 → 文件丢失；
- ✅ 正确：前端用 FormData.append() + 后端 multer.single() 统一解析；
- ? 文件路径应存入数据库，而非文件内容；
- ?️ 务必校验文件类型、大小，并妥善处理异常（如无文件上传时 req.file 为 undefined）；
- ? 生产环境需配置 Nginx/Apache 代理超时、静态资源服务（如 /uploads/* 路径映射到文件系统）。
通过以上改造，即可实现 React → Express → PostgreSQL 的完整文件上传与结构化存储链路。
