本文详解为何直接 `json.stringify()` 无法上传文件，以及如何使用 `formdata` 正确提交含图片的用户资料更新请求，确保姓名、邮箱与头像同步更新成功。
在构建用户资料更新功能时，一个常见误区是：试图将 File 对象与其他表单字段（如 name、email）一并序列化为 JSON 发送。这正是问题根源——浏览器无法将二进制文件（如图片）直接嵌入 JSON 字符串中；JSON.stringify({ image: file }) 实际会把 file 序列化为 {}（空对象），导致后端 req.file 始终为 undefined，头像更新自然失效。
✅ 正确做法是使用 FormData API 构造 multipart/form-data 请求体，它原生支持混合文本字段与二进制文件上传，且无需手动设置 Content-Type 头（浏览器会自动添加带 boundary 的正确类型）。
✅ 前端修正代码（关键改动）
const userDataForm = document.querySelector('.profile-update');
if (userDataForm) {
userDataForm.addEventListener('submit', async (e) => {
e.preventDefault();
const form = new FormData();
form.append('name', document.getElementById('nameInput').value);
form.append('email', document.getElementById('emailInput').value);
// ? 关键：使用 input 元素的 files[0]，且字段名 'photo' 必须与后端 multer.upload.single('photo') 一致
const imageInput = document.getElementById('profile-img-file-input');
if (imageInput.files.length > 0) {
form.append('photo', imageInput.files[0]);
}
try {
const res = await fetch('/api/v1/users/updateMe', {
method: 'PATCH',
body: form // ❌ 不要加 headers: { 'Content-Type': '...' } —— FormData 会自动处理
});
const data = await res.json();
if (data.status === 'success') {
alert('Profile updated successfully!');
window.location.reload(); // 刷新页面以显示新头像
} else {
throw new Error(data.message || 'Update failed');
}
} catch (err) {
alert(`Error: ${err.message}`);
}
});
}⚠️ 注意事项与最佳实践
- 字段名严格匹配：form.append('photo', ...) 中的 'photo' 必须与后端 upload.single('photo') 的参数完全一致，否则 Multer 无法识别上传字段。
- 不要手动设置 Content-Type：FormData 发送时若显式设置 headers: { 'Content-Type': 'multipart/form-data' }，反而会破坏浏览器自动生成的带 boundary 的合法头部，导致后端解析失败。
- 空文件容错：检查 files.length > 0 再 append，避免上传空文件或触发后端校验错误。
- 后端路由顺序不可变：确保 uploadUserPhoto（Multer 中间件）位于 updateMe 之前，否则 req.file 不会被注入。
- 安全补充：生产环境建议在 filterObj 中明确排除敏感字段（如 __proto__, constructor），防止原型污染。
✅ 验证是否生效
- 浏览器开发者工具 → Network 标签 → 查看该请求的 Headers → Content-Type 应为 multipart/form-data; boundary=...
- 后端 console.log(req.file) 应输出包含 filename, buffer, mimetype 的对象
- public/assets/img/ 目录下应生成形如 user-123-1715678901234.jpeg 的缩略图
通过 FormData 替代 JSON.stringify，你就能无缝集成前端文件上传与后端 Multer 处理流程，实现姓名、邮箱、头像三合一的可靠更新。
