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

如您所见，JSON部分中有一个filename="blob"，我想将其删除

我希望在多部分数据中有一个data字段，而不是data文件

Answer 1

还有另一种选择让它对我有用

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

然后

formData.append("my_dto", dto_object, ""); // empty file name doesn't make it dissapear but it seems most server accepts it

Answer 2

完成时

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

您真正生成的是文件，即UTF-8文本文件，其内容将以UTF-8编码{description:'description}。

因此，当您将其附加到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]

FormData附加JSON

2 个答案: