本文详解为何直接 `json.stringify()` 无法上传文件，以及如何使用 `formdata` 构建符合 `multipart/form-data` 规范的请求，确保头像、姓名、邮箱三者均能成功更新。
在构建用户资料更新功能时，一个常见误区是：试图将文件对象（File）与其他表单字段（如 name、email）一并序列化为 JSON 发送。这会导致后端完全收不到文件——因为 JSON.stringify({ image: file }) 会把 File 对象转为空对象 {} 或抛出错误，且 Content-Type: application/json 根本不支持二进制文件传输。
正确做法是使用浏览器原生的 FormData API。它能自动构造 multipart/form-data 请求体，兼容 <input type="file"> 的二进制数据，并与 Express + Multer 的中间件链无缝协作。
✅ 正确的前端实现（关键修改）
将原来的 JSON.stringify() 方式替换为 FormData：
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);
// ✅ 关键：直接 append File 对象（非 .files[0].name 或其他属性）
const imageInput = document.getElementById('profile-img-file-input');
if (imageInput.files.length > 0) {
form.append('photo', imageInput.files[0]); // 字段名 'photo' 必须与后端 multer.single('photo') 一致
}
try {
const res = await fetch('/api/v1/users/updateMe', {
method: 'PATCH',
body: form // ❌ 不要设置 headers: { 'Content-Type': '...' } —— 浏览器会自动设置 boundary
});
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}`);
}
});
}⚠️ 注意事项与最佳实践
- 不要手动设置 Content-Type 头：当 body 是 FormData 时，浏览器会自动生成类似 Content-Type: multipart/form-data; boundary=----WebKitFormBoundary... 的头部。若手动覆盖，将导致后端无法解析。
- 字段名必须严格匹配后端配置：form.append('photo', ...) 中的 'photo' 必须与路由中 upload.single('photo') 的参数完全一致，否则 Multer 将忽略该文件。
- 空文件处理：前端应检查 files.length > 0，避免向后端发送空文件（虽然后端 req.file 为 undefined 时也能安全跳过，但减少无效请求更健壮）。
- 服务端无需改动：你已正确配置了 upload.single('photo') 和 resizeUserPhoto 中间件，只要请求格式正确，整个流程即可工作。
- EJS 模板无需调整：当前的 <input type="file" name="photo"> 结构合理（name 属性可省略，因 FormData.append() 已显式指定），保持原样即可。
? 验证是否生效？
打开浏览器开发者工具 → Network 标签页 → 提交表单 → 查看 /updateMe 请求：
立即学习“前端免费学习笔记（深入）”；
- Headers → Content-Type 应为 multipart/form-data; boundary=...
- Payload → 展开后应能看到 name、email 文本字段及 photo 二进制文件块。
一旦满足上述条件，头像更新即会与姓名、邮箱同步成功——不再出现“只更新文字、不更新图片”的问题。
总之，文件上传 ≠ JSON 传输。拥抱 FormData，是前后端协同处理富媒体表单的基石。
