表单数据附加JSON

elcex8rz  于 2023-01-14  发布在  其他
关注(0)|答案(3)|浏览(133)

如何使用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文件

vxqlmq5t

vxqlmq5t1#

当你这样做

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

您真正生成的一个文件,一个UTF-8文本文件,其内容将以UTF-8编码为{description:'description}
因此,当您将它附加到FormData时,它将作为一个文件传递,但有一个特殊之处,即您将其Content-Type设置为application/json
如果你希望以纯文本形式将这些数据作为表单数据的一部分发送,那么你的服务器将能够直接从post-data解析这些数据,然后只需将你的字符串作为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]
iq0todco

iq0todco2#

还有另一个选择,使它为我工作

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
laik7k3q

laik7k3q3#

您可以尝试以PHP样式添加vars,这样您的后端就很有可能正确地解析它,就像我的例子一样。
例如:

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

相关问题