所以我有这个表格:
<form id="myForm" enctype="multipart/form-data">
<input id="name" title="name" type="text" placeholder="name" />
<input id="quantity" title="quantity" type="text" placeholder="quantity" />
<input id="price" title="price" type="text" placeholder="price" />
<input id="imageLocation" title="imageLocation" type="text" placeholder="imagelocation" />
<input id="description" title="description" type="text" placeholder="description" />
</form>
这是我发送数据的地方:
function postMultiPartHttpCall() {
var XHR = new XMLHttpRequest();
var form = document.getElementById("myForm");
var FD = new FormData(form);
XHR.addEventListener("load", function (event) {
var callingObj = {};
callingObj.responseText = event.target.responseText;
console.log(callingObj);
});
XHR.open("POST", '/articlePost');
XHR.send(FD);
}
这是我收到它的地方:
function _processFormData (request, res, onSuccess,onError) {
var requestBody = '';
request.on('data', function (data) {
requestBody += data;
if (requestBody.length > 1e7) {
res.writeHead(413, 'Request length too long', { 'Content-Type': 'text/html' });
res.end('413 : Request Entity Too Large');
}
});
request.on('end', function () {
var oFormData = qsLib.parse(requestBody);
console.log(request.headers);
});
}
所以当我发送一些数据时,我收到了这个 (console.log):
Debugger listening on 127.0.0.1:5858
Server was started
{ host: 'localhost:1337',
connection: 'keep-alive',
'content-length': '44',
origin: 'http://localhost:1337',
'user-agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36',
'content-type': 'multipart/form-data; boundary=----WebKitFormBoundaryyVFw7KZwIaAIQeQ1',
accept: '*/*',
referer: 'http://localhost:1337/CartSPA.html',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'en-US,en;q=0.8,hr;q=0.6,de-AT;q=0.4,de;q=0.2,de-DE;q=0.2' }
所以我想要的是在不使用 expressJS 或其他类似的第 3rd 方库的情况下获取具有表单字段的对象。是否可以使用边界编号获取属性,或者我在哪里可以看到发送了哪些数据?
最佳答案
是的,“可以使用边界编号获取属性”,但您必须匹配字段并手动解析名称...
此外,为了发送表单中的值,属性 name需要在 input tags 上设置.例如:
<input id="quantity" title="quantity" type="text" placeholder="quantity" />
应该更新为包含一个name 属性,如下所示:
<input name="quantity" id="quantity" title="quantity" type="text" placeholder="quantity" />
在表单字段上设置名称属性后,请求的主体应包含表单数据(即 requestBody
应在数据加载完成后包含编码表单的内容) .例如,它可能类似于以下输出:
-----------------------------150182554619156
Content-Disposition: form-data; name="name"
z4520
-----------------------------150182554619156
Content-Disposition: form-data; name="quantity"
2
-----------------------------150182554619156
Content-Disposition: form-data; name="price"
32.90
-----------------------------150182554619156
Content-Disposition: form-data; name="imagelocation"
/img/z4520.jpg
-----------------------------150182554619156
Content-Disposition: form-data; name="description"
water filter
-----------------------------150182554619156--
###解析表单域
在下面的起始代码中,它检查边界 的请求 header Content-Type(您可能还想确保 Content-Type 实际上是“< em>multipart/form-data") 使用 String.indexOf()然后使用 String.split() 设置边界并从结果数组中取出第二个元素。该边界值可用于将正文数据分隔到数组中(也使用 String.split() )。
我将把它作为练习留给读者解析值并将它们存储在数组中(参见 @TODO
; )。
提示: Array.reduce()可能会派上用场...
request.on('end', function() {
if (request.headers.hasOwnProperty('content-type') && request.headers['content-type'].indexOf('boundary=') > -1) {
var parts = request.headers['content-type'].split('boundary=');
var boundary = parts[1];
var splitBody = requestBody.split(boundary);
/**
@TODO: iterate over elements in splitBody, matching name and value and add to array of fields
*/
res.writeHead(200, {"Content-Type": "application/json"});
res.write(JSON.stringify({formFields: splitBody}));
}
else {
//bad request
res.writeHead(400, {"Content-Type": "application/json"});
res.write("missing boundary in content-type"));
}
res.end();
});
关于javascript - 如何在没有 express 的情况下处理多部分/表单数据请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44191243/