multipart/form-data 没有字段名称的表单

Question

我有一个 HTML 表单，用于将信息发送到 nodejs 后端。然后我尝试使用相同的表单实现文件上传。为此，我必须将表单的 enctype 从默认值 (application/x-www-form-urlencoded) 更改为 enctype='multipart/form-data'，并且我必须在后端使用 multer。我也有这个按钮：

<input type="button" value="Submit" onclick="submitRequest(this);">

我必须更改为：

<input type="submit" value="Submit" onclick="submitRequest(this);">

从我现在可以将文件上传到服务器的意义上来说，这非常有效。但是，此实现取决于表单中字段的名称。问题是我拥有的大部分字段都没有名称。

我想知道是否有一种方法可以同时发送文件和数据，而不必为表单中的每个字段指定名称？我想知道是否可以将我自己的数据注入到单击提交后生成的结果中，然后再将结果发送到后端？如果不行，还有别的办法吗？

Answer 1

您可以使用 FormData 将键和值 multipart/form-data、fetch() 或 XMLHttpRequest() 设置为 POST 数据到服务器。

<form id="form">
  <select>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <input type="file" />
  <input type="submit" value="Submit" />
</form>

function submitRequest(event) {
  event.preventDefault();
  var i = 0;
  var inputs = form.querySelector("input[type=file], select");
  var fd = new FormData();
  for (let el of inputs) {
    if (el.tagName === "SELECT") {
      fd.append("select", el.value)
    }
    if (el.type === "file") {
      if (el.files.length) {
        for (let file of el.files) {
          fd.append("file" + (i++), file);
        }
      }
    }
  }
  fetch("/path/to/server", {method:"POST", body:fd})
  .then(function(response) {
    return response.text()
  })
  .then(function(res) {
    console.log(res)
  })
  .catch(function(err) {
    console.log(err)
  })
}

const form = document.getElementById("form");
form.onsubmit = submitRequest;

multipart/form-data 没有字段名称的表单

multipart/form-data form with no field names

html

javascript

forms

node.js

multer