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

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

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

Answer 1

当你

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

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

因此，当您将它附加到您的 FormData 时，它会作为文件传递，具有一个特殊性，即您确实将其 Content-Type 设置为 application/json。

如果您希望以纯文本形式将此数据作为表单数据数据的一部分发送，您的服务器将能够直接从 post-数据中解析，那么只需将您的字符串附加为您的 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]

Answer 2

还有一个选项适合我

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 3

您可以尝试添加 PHP 样式的变量，您的后端很有可能会正确解析它，就像我的情况一样。

喜欢：

  var form = new FormData();
  form.append('name', 'Name');
  form.append('details[age]', '12');

就我而言，我是这样做的

  const courseDto = {
      course_title: 'Title',
      course_category: 'My category'
  }

  const myForm = new FormData();
  courseForm.append("imageFile", this.file);

  Object.entries(courseDto).map(([key, value]) =>
    myForm.append(`course[${key}]`, value)
  );

我在 request.body 的后端得到了这样的结果：

course: {
   course_title: 'Title',
   course_category: 'My category'
}

和

imageFile on request.File

FormData 追加 JSON

FormData append JSON

json

multipartform-data

form-data