multipart/form-data form with no field names

问题:

I have an HTML form that I was using to send information to the nodejs backend. I then tried to implement file uploads using the same form. To do that, I had to change the enctype of the form from the default value (application/x-www-form-urlencoded) to be enctype='multipart/form-data', and I had to use multer on the backend. I also had this button:

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

which I had to change to:

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

This worked great in the sense that I now had files uploading to the server. However, this implementation depends on the field's names in the form. The problem is that most of the fields that I have don't have names.

I was wondering if there is a way to get both files and data to send without having to give names to each field in the form? I am wondering if it would be possible to inject my own data into the result that is generated after clicking Submit and before that result is sent to the backend? If not, is there any other way?

回答1:

You can use FormData to set key and value multipart/form-data, fetch() or XMLHttpRequest() to POST data to server.

<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;