json - FormData 附加 JSON

Question

如何使用 FormData 创建以下结果

------WebKitFormBoundaryOmz20xyMCkE27rN7
Content-Disposition: form-data; name="data";
Content-Type: application/json

{
  "description": "description"
}
------WebKitFormBoundaryOmz20xyMCkE27rN7
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg


FILE_DATA
------WebKitFormBoundaryOmz20xyMCkE27rN7

我在用

const formData = new FormData();
const data = new Blob([JSON.stringify({
        description: 'description',
      })], {
        type: 'application/json'
      });
formData.set('data', data);
formData.set('file', file);

它产生

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

{
  "description": "description"
}
------WebKitFormBoundaryOmz20xyMCkE27rN7
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg


FILE_DATA
------WebKitFormBoundaryOmz20xyMCkE27rN7

如您所见，我们有一个 filename="blob"在 JSON 部分，我想删除它

我想要一个 data我的多部分数据中的字段不是 data文件

Answer 1

当你做

new Blob([JSON.stringify({
    description: 'description',
  })], {
  type: 'application/json'
})

你真正产生了什么 是 一个文件，一个 UTF-8 文本文件，其内容为 {description:'description}以 UTF-8 编码。

因此，当您将其附加到 FormData 时，它会作为文件传递，其中一个特殊之处是您确实将其 Content-Type 设置为 application/json .

如果您希望将此数据作为表单数据数据的一部分以纯文本形式发送，您的服务器将能够直接从后数据中解析，那么只需将您的字符串附加为您的 FormData 的键:

const data = JSON.stringify({
  description: 'description',
})
const fd = new FormData();
// append directly as part of the postData in plain text
fd.append('data', data);

console.log(...fd); // [key, value]