如何在JavaScript中验证multipart/form-data格式FormData的内容长度？

直接累加表单字段的字符串长度和文件大小确实得不到准确的Content-Length，正如你发现的那样——因为multipart/form-data格式包含了很多额外的编码内容：比如分隔字段的boundary字符串、每个字段的HTTP头信息（如Content-Disposition）、换行符等，而且不同浏览器生成的boundary长度可能不同，这就导致手动计算误差很大。

最可靠的解决方案：利用Blob的size属性 #

浏览器可以自动将FormData转换为Blob对象，这个Blob的size属性就是经过multipart/form-data编码后的准确字节数，和实际发送请求时的Content-Length完全一致。

修改你的getContentLength函数如下：

function getContentLength(formData) {
  // 将FormData转换为Blob，浏览器会自动处理multipart编码逻辑
  const blob = new Blob([formData]);
  return blob.size;
}

用你的测试代码验证一下：

const formData = new FormData();
formData.append('text', 'foo');
alert(`calculated content-length is ${getContentLength(formData)}`);
fetch('https://httpbin.org/post', { method: 'POST', body: formData });

此时弹出的数值会和浏览器实际发送请求的Content-Length完全匹配（Chrome中是138，Firefox中是172）。

为什么这个方法可行？ #

当你用fetch发送FormData时，浏览器内部其实也是先将FormData转换为类似的Blob来处理请求体的，所以Blob的size就是最终请求体的字节数，完全符合服务器校验的Content-Length标准。

注意事项 #

• 兼容性：现代浏览器（Chrome、Firefox、Edge 等）都支持Blob([FormData])的转换方式，IE 11及更早版本不支持，不过现在这类浏览器已经很少使用了。
• 大文件场景：如果表单包含超大文件，转换为Blob时不会立即读取整个文件内容（浏览器会做流式处理），所以不用担心内存占用问题。

内容的提问来源于stack exchange，提问作者maiermic