用javascript在自己的库中创建多部分/表单数据请求

我试图寻找解决方案（现在已经两天了），但没有任何帮助

由于许多原因，我不得不用JavaScript编写自己的库来构建一个多部分/宿舍数据体

我检查了其他库（用于节点）的工作方式，并阅读了规范。然后我编写了代码（），这非常简单，因为规范非常简单

但是，我的测试服务器无法识别请求中的参数。任何参数（文本或文件）

My library生成以下HTTP消息：

（

[NL]

表示新行字符，即

\r\n

）

这是实际传递到套接字的快照。库构建HTTP消息并将其转换为

ArrayBuffer

，这是套接字发送函数中的一个参数

现在，我知道我的代码有问题，我就是找不到。我尝试在消息部分之后添加新行（如上面的代码所示），或者不添加（在图像数据之后，我总是添加新行）。也许有人可以在这里看到消息的问题并指出它，因为我不知道如何解决它：）

---

不确定如何从FormData获取HTTP正文消息：）我只能 使用Fetch API和请求对象执行此操作

您可以迭代

FormData

对象，首先调用

.blob（）

，然后将

blob

传递给

new Response（）

，并使用

.arrayBuffer（）

链接

document.querySelector（“输入[类型=文件]”）
.onchange=（e）=>{
const[files，fd，arr]=[e.target.files，new FormData（），Array（）]；
for（让文件中的文件）{
console.log（文件）；
append（`file-${[…fd.keys（）].length}`，file，file.name）；
}
对于（让fd的[prop]{
let request=新请求（“/”{
方法：“张贴”，
主体：fd.get（道具）
});
arr.push(
request.blob（）
.then（blob=>newresponse（blob）.arrayBuffer（））
)
}
承诺。全部（arr）
。然后（缓冲区=>{
for（让ab为缓冲区）{
控制台日志（ab）；
设img=新图像；
img.onload=（）=>{
document.body.appendChild（img）
}
让url=url.createObjectURL（新Blob（[ab]）；
img.src=url；
}
})
}

终于找到了。问题是边界问题。根据规范，主体部分通过两个短划线（

-

）符号和内容类型中定义的边界字符串相互分隔。我的信息中缺少这两个破折号

因此，消息正文的正确版本是：

POST /post HTTP/1.1[NL]
HOST: localhost:8081[NL]
content-type: multipart/form-data; boundary=-------------805520824430161118507807[NL]
content-length: 17789[NL]

---------------805520824430161118507807[NL]
Content-Disposition: form-data; name="image"; filename="arc-icon.png"[NL]
Content-Type: image/png[NL]
[NL]
�PNG[NL]
[binary data for about ~17700 bytes)[NL]
[NL]
---------------805520824430161118507807--[NL]

---

“库构建HTTP消息并将其转换为

ArrayBuffer

，这是socket发送函数中的一个参数”问题中的

ArrayBuffer

at

javascript

？“然而，我的测试服务器无法识别请求中的参数”您是否可以在问题中包含完整的

javascript

，并在jsfiddle或plnkr中重现问题？实际上这并不重要。问题中的HTTP消息被转换为发送到服务器的字符串消息。我需要找到HTTP消息的问题以更正代码中的错误。分析代码比分析消息要困难得多（在本例中），为什么您不能使用

FormData

？我不能使用任何这些服务，因为它是一个使用sockets API的chrome应用程序，在常规JS API中不可用。就像我说的，我需要找到消息的问题，而不是代码。但是，完整的代码链接在问题中-@guest271314不确定如何从FormData获取HTTP正文消息：）我只能使用Fetch API和请求对象来完成。但我不能，直到被修复-@guest271314你是对的，这就是我以前做的。但在Chrome56中，我在本周早些时候报告了一个bug（bugs.chromium.org/p/chromium/issues/detail？id=688100），这使得这不可能实现。而且您不需要迭代FormData，因为请求对象可以接受FormData，并且

arrayBuffer

函数生成完整的多部分消息体。但是因为这个错误，我不能使用它。所以我在寻找不同的方法。@PawełPsztyć“但在Chrome56中，我在本周早些时候报告了一个bug（bug.chromium.org/p/chromium/issues/detail？id=688100），这使得这不可能。”不确定“不可能”是什么意思？回答时的

javascript

是否未返回预期结果？不确定结果是否为错误。您的答案无法回答我的问题。问题不在于从文件创建ArrayBuffer。问题是关于从表单数据生成有效的多部分消息。您可以使用

获取

、

请求

或

响应

来创建有效的

多部分/表单数据

消息，如回答和链接问题中所示。在错误报告使用

请求

的地方，为什么不能使用

获取

？

POST /post HTTP/1.1[NL]
HOST: localhost:8081[NL]
content-type: multipart/form-data; boundary=-------------805520824430161118507807[NL]
content-length: 17789[NL]

---------------805520824430161118507807[NL]
Content-Disposition: form-data; name="image"; filename="arc-icon.png"[NL]
Content-Type: image/png[NL]
[NL]
�PNG[NL]
[binary data for about ~17700 bytes)[NL]
[NL]
---------------805520824430161118507807--[NL]