没有字段名称的多部分/表单数据表单 [英] multipart/form-data form with no field names

问题描述

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

 < input type =buttonvalue =Submitonclick =submitRequest（this） ;> 
  

我必须更改为：

 < input type =submitvalue =Submitonclick =submitRequest（this）;> 
  

从我现在有文件上传到服务器的意义上说，这很好用。但是，这种实现取决于表单中字段的名称。问题是，我所拥有的大部分字段都没有名称。

我想知道是否有办法让文件和数据无需发送给表单中的每个字段命名？我想知道是否可以将我自己的数据注入到单击提交后生成的结果中，然后将结果发送到后端？如果不是，还有其他方法吗？

解决方案

您可以使用 FormData 设置键和值 multipart / form-data ， fetch（）或 XMLHttpRequest（） to POST 数据到服务器。

 < form id =form > 
< select> 
< option value =1> 1< / option> 
< option value =2> 2< / option> 
< / select> 
< input type =file/> 
< input type =submitvalue =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 input）{
 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）; 
 
 
 
 $ b 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.onsubmit = submitRequest; 
  

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?

解决方案

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;

这篇关于没有字段名称的多部分/表单数据表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！