如何构造不含filename的application/json类型FormData POST请求？

需要构造如下格式的multipart/form-data请求：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="attachments"; filename="22611.jpg"
Content-Type: image/jpeg

(data)
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="complaint"
Content-Type: application/json

[{"someKey":"3285577","someAnotherKey":1}]
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="attachments"; filename="22039.jpg"
Content-Type: image/jpeg

(data)
------WebKitFormBoundary7MA4YWxkTrZu0gW--

该请求包含2个标记为attachments的图片字段，以及一个名为complaint的字段，要求complaint字段带有Content-Type: application/json且不要自动添加filename。

尝试了两种代码但都不符合要求：

1. 使用Blob添加complaint字段，会自动生成filename="blob"：

files.forEach(file => formData.append('attachments', file));
formData.append('complaint', new Blob([JSON.stringify(complaints)], {
  type: 'application/json'
}));

生成的请求片段：

Content-Disposition: form-data; name="complaint"; filename="blob"
Content-Type: application/json

[{"someKey":"3285577","someAnotherKey":1}]
-----------------------------223573272824043770992215051292--

2. 直接添加JSON字符串，无法设置Content-Type：

files.forEach(file => formData.append('attachments', file));
formData.append('complaint', JSON.stringify(complaints));

生成的请求片段：

Content-Disposition: form-data; name="complaint"

[{"someKey":"3285577","someAnotherKey":1}]
-----------------------------3285194322809168152615032804--

使用FormData.append()的第三个可选参数控制filename，将其设为null或空字符串，就能避免自动添加filename字段，同时保留Blob的Content-Type设置：

files.forEach(file => formData.append('attachments', file));
formData.append('complaint', new Blob([JSON.stringify(complaints)], {
  type: 'application/json'
}), null); // 传入null作为filename参数

原理说明 #

• 当FormData.append()的value是Blob或File类型时，浏览器默认会自动添加filename属性；
• 传入null或空字符串时，浏览器不会生成filename字段，同时会保留Blob设置的Content-Type，完全匹配API要求的格式。

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