多特姚1. 为什么我们需要JSON和FormData的转换
在日常的Web开发中，前端和后端的通信就像两个说不同语言的人在交流。前端通常喜欢用JSON这种结构化的数据格式，因为它能很好地表示复杂的数据结构；而后端有时候更倾向于接收FormData，特别是当涉及到文件上传的时候。这就好比前端在说普通话，后端在说方言，我们需要一个翻译官来确保双方能顺畅沟通。
我遇到过不少项目，前端精心构造了一个包含嵌套对象和数组的JSON数据，结果后端接口只接受FormData格式。这时候如果不做转换，就像把一本中文书直接递给只懂英文的人，对方完全无法理解。反过来也一样，当后端返回FormData格式的数据时，前端用JSON的方式来解析，结果就是各种报错和异常。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 理解JSON和FormData的本质区别
2.1 JSON：结构化的数据代表
JSON就像是数据界的乐高积木，它用键值对的方式把数据组织得井井有条。一个典型的JSON对象可能是这样的：
javascript复制{
"user": {
"name": "张三",
"age": 25,
"hobbies": ["编程", "游泳", "摄影"]
}
}
这种结构特别适合表示复杂的数据关系，而且几乎所有编程语言都能轻松解析。我在处理配置信息、用户数据这些结构化内容时，JSON总是首选。
2.2 FormData：表单数据的搬运工
FormData则更像是一个快递员，专门负责把表单数据打包运输。它最擅长处理的是传统的键值对，特别是当涉及到文件上传时。创建一个FormData对象通常是这样：
javascript复制const formData = new FormData();
formData.append('username', '张三');
formData.append('avatar', fileInput.files[0]);
这里的关键区别在于，FormData可以原生处理文件对象，而JSON需要先把文件转换成Base64字符串之类的格式。在实际项目中，如果表单里有文件上传，FormData几乎是唯一的选择。
3. JSON转FormData的实战技巧
3.1 基础转换：简单对象的处理
让我们从一个最简单的场景开始：把一个扁平化的JSON对象转换成FormData。假设我们有一个用户信息对象：
javascript复制const userInfo = {
name: '李四',
age: 30,
email: 'lisi@example.com'
};
转换成FormData的代码非常简单：
javascript复制const formData = new FormData();
Object.keys(userInfo).forEach(key => {
formData.append(key, userInfo[key]);
});
这个方法我在很多项目里都用过，特别是对接那些老式的表单处理接口时特别管用。但要注意，这种简单转换只适用于一层结构的对象。
3.2 进阶处理：嵌套对象和数组
现实项目中的数据往往要复杂得多。比如下面这个包含嵌套对象和数组的例子：
javascript复制const complexData = {
user: {
basicInfo: {
name: '王五',
age: 28
},
skills: ['JavaScript', 'React', 'Node.js']
}
};
对于这种情况，我们需要递归处理：
javascript复制function jsonToFormData(data, formData = new FormData(), parentKey = '') {
if (data && type