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

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;