用 FormData 传数据给后端却收不到，常见原因有哪些？

### 解决前端 FormData 传输数据至后端但后端接收不到的问题当使用 `FormData` 对象发送请求时，确保不手动设置 `Content-Type` 头部，因为浏览器会自动处理 multipart/form-data 的边界值和其他细节[^1]。对于某些特定场景下，比如传递 String 数组给后端而后者接收到的是空列表的情况，可能是因为在构建 `FormData` 实例并追加字段的方式存在问题。应确保每次调用 `.append()` 方法时提供有效的键名和对应的值[^2]。如果希望同时向服务器传送文件以及 JSON 数据，则需注意如何正确地序列化这些信息以便于后端解析。一种常见做法是在 `FormData` 中分别添加文件与其他结构化的数据项（如通过转换成字符串形式）。然而，在此过程中要留意后端框架对接收参数类型的限制；例如 Spring Boot 可能只允许以特定方式访问上传的内容[^3]。针对 PHP 环境下的文件上传问题，除了确认 HTML 表单已正确定义外，还需验证 PHP 脚本是否能够正确读取 $_FILES 数组内的条目。另外，考虑到大型文件可能会触发超时错误或其他异常状况，建议优化客户端代码逻辑来支持分片上传等功能[^4]。最后值得注意的是不同环境间可能存在差异，因此测试阶段应当尽可能模拟实际运行条件，并仔细检查网络请求的有效载荷部分，确保其格式符合预期标准。 ```javascript // 创建一个新的 FormData 对象实例 const formData = new FormData(); // 添加普通文本字段 formData.append('username', 'example'); // 追加文件输入框选中的第一个文件 if (document.querySelector('#fileInput').files.length > 0) { const file = document.querySelector('#fileInput').files[0]; formData.append('profilePic', file); } // 发送 POST 请求而不显式设定 Content-Type fetch('/upload-endpoint', { method: 'POST', body: formData, }) .then(response => response.json()) .catch(error => console.error('Error:', error)); ```

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

下一篇 el-form 自定义验证器中 value 为空时怎么正确报错？