JSON 和 XML 在 multipart/form-data 文件上传中不直接参与文件传输,仅可能用于附带的元数据;JSON 更轻量高效,XML 冗长且解析开销大,文件本体传输性能不受二者影响。

JSON 和 XML 在 multipart/form-data 上传中根本不会直接出现
文件上传走的是 multipart/form-data 编码,它和 JSON、XML 没有直接关系——你不能把一个 {"file": "base64..."} 的 JSON 当作文件字段发给后端并期望它被识别为上传文件。浏览器原生 提交的永远是二进制分段数据,不是文本格式序列化结果。
真正对比的是 API 接口层的数据交换格式(非文件部分)
当上传请求附带元数据(如 title、tags、user_id)时,这些字段可能以 JSON 或 XML 形式嵌在 multipart 的某个文本 part 中,也可能由前端在 query/body 中额外发起一次独立请求。此时才涉及格式选择:
- JSON 更轻量:无结束标签、无命名空间、默认 UTF-8、解析快;
Content-Type通常为application/json - XML 更冗长:需闭合标签、可含 DTD/Schema、编码声明易出错;
Content-Type通常为application/xml或text/xml - 现代浏览器对
JSON.parse()优化极好,而DOMParser解析 XML 开销明显更高,尤其在移动端 - 如果你用的是
fetch+FormData,元数据应作为独立字段追加,而非塞进 JSON 字符串再 base64 —— 后端无法按标准 multipart 方式提取
常见错误:把 JSON 字符串当文件内容上传
有人会写这样的代码,以为是在传“JSON 格式的文件”:
const data = new FormData();
data.append('metadata', JSON.stringify({ title: 'report', version: 2 }));
data.append('file', fileInput.files[0]);
这没问题——metadata 是普通文本字段,后端收到的是纯字符串,不是 JSON 对象。但如果你改成这样:
const data = new FormData();
data.append('payload', new Blob([JSON.stringify({ title: 'report', file: fileContent })], { type: 'application/json' }));
那就错了:fileContent 是二进制(比如 ArrayBuffer),JSON.stringify 会把它转成 "{}" 或报错;且后端必须手动解析这个 JSON blob,失去了 multipart 的流式处理能力,还可能触发内存溢出。
性能差异实际只体现在元数据解析阶段
实测 10KB 元数据在 Node.js(express + multer)下:
- JSON 解析平均耗时约
0.15ms(JSON.parse()) - XML 解析(用
fast-xml-parser)平均耗时约0.8ms,错误容忍度更低(如缺失直接抛异常) - 文件本体传输耗时完全不受影响——它走的是原始字节流,不经过 JSON/XML 序列化/反序列化
- 移动端弱网下,XML 多出的标签字符会略微增加首字节时间(TTFB),但差距通常小于
5ms
真正卡顿往往来自没做分片上传、没压缩图片、或后端同步处理大文件——而不是选了 JSON 还是 XML。











