含数组与文件上传字段的HTML Form Data payload格式咨询

你推导的FormData结构不符合multipart/form-data的原生提交规范，核心错误集中在数组字段、文件字段的序列化逻辑上。

该编码格式不会将表单项序列化为JSON结构，而是自动生成一段随机字符串作为boundary分隔符，将每个表单项拆分为独立的分段，每个分段携带自身的描述头：

• 普通文本字段分段仅需标注name属性
• 文件字段分段必须额外标注上传时的原始filename、文件对应的Content-Type，分段内容为文件二进制数据
• 同名字段（包括带[]后缀命名字段）不会被自动合并为数组，每存在一个有效表单项，就生成一个独立的同名分段

• 数组字段处理错误：你将name[]、address[]这类字段直接映射为JS数组，不符合原生提交逻辑。原生表单中这类带[]后缀的同名字段，会按页面DOM顺序逐个生成分段，即使输入框值为空，也会生成一个值为空字符串的对应分段，不会直接省略或传空数组。
• 文件字段处理错误：你表单中的aadhar_image是两个未加[]后缀的独立文件输入框，原生提交时每个选中的文件会单独生成一个aadhar_image分段，不能将文件放入数组传递；如果未选择文件，会生成一个带空filename属性的空分段，而非空数组。
• 冗余字段问题：你结构中新增的csrf_token、member_id不在当前HTML表单的原生字段范围内，除非接口文档明确要求传递，否则原生表单不会自动携带这两个参数，不要自行追加。

真实请求报文示例 #

以下是表单填完2组有效信息后的真实payload结构，分隔符以浏览器常用的WebKit系分隔符为例：

POST https://example.com HTTP/1.1
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="name[]"

第一组姓名
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="address[]"

第一组地址
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="occupation[]"

第一组职业
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="mobile[]"

第一组手机号
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="email[]"

第一组邮箱
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="aadhar_no[]"

第一组Aadhar编号
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="aadhar_image"; filename="aadhar1.jpg"
Content-Type: image/jpeg

<第一张Aadhar图片二进制内容>
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="name[]"

第二组姓名
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="address[]"

第二组地址
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="occupation[]"

第二组职业
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="mobile[]"

第二组手机号
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="email[]"

第二组邮箱
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="aadhar_no[]"

第二组Aadhar编号
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="aadhar_image"; filename="aadhar2.jpg"
Content-Type: image/jpeg

<第二张Aadhar图片二进制内容>
------WebKitFormBoundary7MA4YWxkTrZu0gW--

前端构造代码示例 #

如果是在JS中构造请求，直接使用原生FormData对象按顺序append所有字段即可，不要自行封装为普通JS对象传递：

const formData = new FormData();
// 追加第一组信息
formData.append('name[]', '第一组姓名值');
formData.append('address[]', '第一组地址值');
formData.append('occupation[]', '第一组职业值');
formData.append('mobile[]', '第一组手机号值');
formData.append('email[]', '第一组邮箱值');
formData.append('aadhar_no[]', '第一组Aadhar编号值');
formData.append('aadhar_image', firstFileInput.files[0]); // 传入第一个文件选择框选中的File对象
// 追加第二组信息
formData.append('name[]', '第二组姓名值');
formData.append('address[]', '第二组地址值');
formData.append('occupation[]', '第二组职业值');
formData.append('mobile[]', '第二组手机号值');
formData.append('email[]', '第二组邮箱值');
formData.append('aadhar_no[]', '第二组Aadhar编号值');
formData.append('aadhar_image', secondFileInput.files[0]); // 传入第二个文件选择框选中的File对象

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