没有字段名称的多部分/表单数据表单

问题描述

限时删除！！

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

  
您可以使用 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;
                        
这篇关于没有字段名称的多部分/表单数据表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
                        
1403页，肝出来的..