我是否需要在发送数据之前将JSON对象字符串化为FormData？

Question

我想与FormData一起发送一些元数据，然后在服务器上访问该数据。为了访问服务器上的数据，它必须是Javascript对象，因此我可以执行以下操作：MetaData.originalFilename。

但是规范说

该字段的值。这可以是USVString或Blob（包括子类，例如File）。如果未指定这些值，则值为转换为字符串。

所以，如果我这样做：

this.Form.MetaData = {originalFilename: "test.jpg", newFilename: "test-today.jpg", size: 100, mimetype: "image/jpeg"}
FormBody.append('MetaData', this.Form.MetaData);

是否可以在服务器上访问MetaData.size以获取文件的大小？当我测试服务器返回的收益时，“网络”标签显示响应只是：

"[object Object]"

还是类似的东西。那将意味着它只是存储为字符串？

我认为答案是我必须首先：

FormBody.append('MetaData', JSON.stringify(this.Form.MetaData));

然后在服务器上将将JSON字符串化的字符串转换回Javascript对象。

我不确定是否会感谢一些想法，谢谢！

Answer 1

您可以在提交表单之前将对象中的每个项目添加为隐藏输入。

请参见下面的代码段

const qs = selector => document.querySelector(selector);
const form = qs('#form-id');
let paramaters;

const metaData = {
  originalFilename: "test.jpg",
  newFilename: "test-today.jpg",
  size: 100,
  mimetype: "image/jpeg"
};

qs("button[type=submit]").addEventListener("click", function(event) {
  event.preventDefault();
  Object.keys(metaData).forEach(element => {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = element;
    input.value = metaData[element];
    form.appendChild(input);
  })
  console.log(form.elements)
  // Uncomment below to have form submitted
  //form.submit();
});

<form id="form-id" action="https://example.com" method="post">
  <input type="text" name="param_1" value="parameter 1">
  <input type="text" name="param_2" value="parameter 2">
  <button type="submit">Submit</button>
</form>