具有多文件字段的表单上的Object.fromEntries 仅返回一个条目

Question

我正在尝试创建一个采用表单并通过 ajax 调用提交内容的 JavaScript 函数。当我有一个函数迭代

document.forms.namedItem(id).elements

的值时，这是有效的，我只需使用

htmlElement.files

（这是一个文件数组）获取多文件字段值......但遗憾的是，此功能已被弃用，我'一直在接收通过表单验证的空有效负载...因此它在某些设备上失败。

替代方案似乎是：

Object.fromEntries(new FormData(document.getElementById(id)).entries());

这更干净，并且自动为我创建对象，但是......

问题是：拥有像

<input class="form-control" type="file" name="imgs" id="imgs" multiple>

这样的表单字段会从上述方法生成仅包含最后一个文件的输出，而不是选定文件的数组

请发送帮助

function saveProject() {
  event.preventDefault();
  console.log(
    Object.fromEntries(
      new FormData(
        document.getElementById("update_project")
      ).entries()
    )
  );
}

<form id="update_project" onsubmit="return saveProject();" enctype="multipart/form-data">
  <input type="file" name="imgs" id="imgs" multiple />
  <input type="submit" name="Submit" />
</form>

Answer 1

我必须对数据运行另一个循环，查找

File

的实例并使用

FormData.getAll()

方法。留下这个问题是因为我不喜欢这种方法。我宁愿看到一个完整的功能解决方案......但我需要快速修复哈哈

function saveProject() {
  event.preventDefault();
    var form = new FormData(document.getElementById("update_project"));
  var data = Object.fromEntries(form.entries());
    Object.keys(data).forEach(x => {
        if ('File' in window && data[x] instanceof File) {
            data[x] = form.getAll(x);
        }
    });
    console.log(data);
}

<form id="update_project" onsubmit="return saveProject();" enctype="multipart/form-data">
  <input type="file" name="imgs" id="imgs" multiple />
  <input type="submit" name="Submit" />
</form>