本文详解为何直接 json 传输无法上传文件，并提供基于 formdata 的完整前后端解决方案，确保头像、姓名、邮箱三者均可成功更新。
在 Web 开发中，更新用户资料（如姓名、邮箱、头像）是常见需求。但一个典型误区是：试图用 JSON.stringify() 将文件对象（File 实例）一并序列化发送——这会导致文件数据丢失，因为 File 对象无法被 JSON 序列化（JSON.stringify({ image: file }) 中 image 会变成 {} 或 null），后端自然收不到文件流。
你的原始前端代码正是如此：
body: JSON.stringify({ name, email, image }), // ❌ 错误：image 是 File 对象，JSON 不支持
headers: { 'Content-Type': 'application/json' },而 Express + Multer 的中间件链（upload.single('photo')）明确要求请求为 multipart/form-data 类型，并期望字段名 photo 对应上传的文件——这与 JSON 请求完全不兼容。
✅ 正确解法：使用 FormData API 构建表单数据，它原生支持文件上传，并自动设置正确的 Content-Type（含 boundary），无需手动指定 headers：
立即学习“前端免费学习笔记（深入）”；
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);
const imageInput = document.getElementById('profile-img-file-input');
if (imageInput.files[0]) {
form.append('photo', imageInput.files[0]); // ✅ 字段名必须与 multer.upload.single('photo') 一致
}
try {
const res = await fetch('/api/v1/users/updateMe', {
method: 'PATCH',
body: form // ✅ 自动设置 multipart/form-data header
// ⚠️ 不要加 headers: { 'Content-Type': '...' } —— 会破坏 boundary！
});
const data = await res.json();
if (data.status === 'success') {
alert('Profile successfully updated');
window.location.reload(); // 刷新页面以显示新头像
} else {
throw new Error(data.message || 'Update failed');
}
} catch (error) {
alert(`Error: ${error.message}`);
}
});
}? 关键注意事项：
- FormData.append('photo', file) 中的 'photo' 必须与后端 multer.single('photo') 的字段名严格一致；
- 不要手动设置 Content-Type header，fetch 会自动添加带 boundary 的 multipart/form-data；
- 建议检查 files[0] 是否存在，避免空文件导致后端 req.file 为 undefined；
- 后端 updateMe 控制器中 filterObj(req.body, 'name', 'email') 仅处理文本字段，图片由 req.file.filename 注入，逻辑已正确，无需修改；
- EJS 模板中 的 name 属性可保留（虽 FormData 不依赖它），但非必需。
? 额外优化建议：
- 前端可添加简单校验（如图片类型/大小）提升用户体验；
- 后端 resizeUserPhoto 中 sharp 处理失败时应抛出错误（当前静默跳过），便于调试；
- 更新成功后，可通过 data.data.user.photo 动态更新
的 src，避免整页刷新。
至此，姓名、邮箱、头像三者即可通过同一请求稳定更新——核心在于理解：文件上传 ≠ JSON 传输，必须用 FormData + multipart/form-data。
