从对象数组到 FormData答案

【问题标题】：From Object Array to FormData从对象数组到 FormData
【发布时间】：2021-08-27 02:35:24
【问题描述】：

我有一个包含数据和文件的对象，我需要将整个东西转换为 formData，但是当我将所有内容附加到 formData 时，文件是空的。

最终，在后端，当我尝试执行 req.files 时，它会出现一个空数组。

这是我拥有的对象的图像：

之后，我尝试将其附加到 formData：这是我的代码示例：

let data = getInfo();

for (let p of data) {
    var postData = JSON.stringify(p);
    var formData = new FormData();
    formData.append( "data", postData );
    console.log(formData.get("data"));  <--- This has file as empty.
}

这是 console.log 的响应

{"price_floor":1000000,"cost":1100000,"templateId":"1","locationId":"21","file":{}}

当我将文件附加到 formData 时，为什么没有附加文件？

【问题讨论】：

您不能将文件放入 JSON。

标签： javascript jquery multipartform-data

【解决方案1】：

无法使用JSON.stringify直接将File对象转换为JSON

您可以尝试使用自定义替换器

function stringify(obj) {
    const replacer = [];
    for (const key in obj) {
        replacer.push(key);
    }
    return JSON.stringify(obj, replacer);
}

$("#file").change(function(){
  const json = stringify($(this)[0].files[0]);
  console.log(json);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <div>
    <form id="form">
      <label for="lname">File:</label><br>
      <input type="file" id="file" name="file"><br><br>
    </form>
  </div>
</div>

但我个人的习惯是这样获取FormData

$("#file").change(function(){
  const data = Object.fromEntries(new FormData(form).entries());
  console.log(data);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <div>
    <form id="form">
      <label for="name">Name:</label><br>
      <input type="text" id="name" name="name"><br>
      <label for="lname">File:</label><br>
      <input type="file" id="file" name="file"><br><br>
    </form>
  </div>
</div>

【讨论】：