javascript - 为 JavaScript 中的文件上传生成 HTTP 多部分正文

Question

我正在尝试用 JavaScript 构建 HTTP 多部分表单数据(在服务器上用于 Meteor.js HTTP 请求)。

这是发送 POST 请求的 Meteor 代码。

var res = HTTP.post(url, {
  headers: formatted.headers,
  content: formatted.content
});

我正在使用此代码准备标题和内容。

function MultipartFormData(parts) {
  var boundary = (new Date()).getTime();
  var bodyParts = [];

  _.each(parts, function (value, key) {
    value.data = (new Buffer(value.data)).toString('binary');

    bodyParts.push(
      '---------------------------' + boundary,
      'Content-Disposition: form-data; name="' + key + '"; filename="' + value.filename + '"',
      'Content-Type: ' + value.contentType,
      '',
      value.data);
  });

  bodyParts.push('---------------------------' + boundary + '--', '');

  var bodyString = bodyParts.join('\r\n');

  return {
    content: bodyString,
    headers: {
      'Content-Type': 'multipart/form-data; boundary=' + '---------------------------' + boundary,
      'Content-Length': bodyString.length
    }
  }
}

文件详细信息:

key = 'file'
value.filename = 'file.png'
value.contentType = 'image/png'
value.data is an Uint8Array

服务器无法处理这个请求。当我使用标准的 Node.js 请求对象和使用相同数据的 FormBuilder 时，一切正常。我只是请求两台服务器之间的 http 连接。谁能告诉我我的代码有什么问题？我不是 HTTP 协议(protocol)方面的专家，关于生成 HTTP 请求的内容，我只有零碎的信息。

还有一件事。我试过将 Uint8Array 转换为 Buffer、ArrayBuffer、String，但也没有用。

编辑:

我已经测试了在 Firefox 和我的应用程序中发送相同文件时的 http 正文是什么:

火狐:

Content-Type: multipart/form-data; boundary=---------------------------19039834425958857471335503868
Content-Length: 299

-----------------------------19039834425958857471335503868
Content-Disposition: form-data; name="file"; filename="test.png"
Content-Type: image/png

PNG


IHDR

·ü]þPLTEÿâ  7
IDAT×cÀÚqÅIEND®B`
-----------------------------19039834425958857471335503868--

我的应用:

Content-Type: multipart/form-data; boundary=---------------------------1408816255735
Content-Length: 263

---------------------------1408816255735
Content-Disposition: form-data; name="file"; filename="test.png"
Content-Type: image/png

PNG


IHDR

·ü]þPLTEÿâ      7
IDA×cÀ
                                 ÚqÅIEND®B`
---------------------------1408816255735--

有点不同，但我不知道这种差异的根源是什么。

编辑 2

并且服务器响应是:错误:失败 [400] 具有 0 个 mime 部分的无效多部分请求。

编辑 3

像这样生成正文时:

Content-Type: multipart/form-data; boundary=1408827490794
Content-Length: 213

--1408827490794
Content-Disposition: form-data; name="file"; filename="test.png"
Content-Type: image/png

PNG


IHDR

·ü]þPLTEÿâ  7
IDA×cÀ
      ÚqÅIEND®B`
--1408827490794--

我收到错误:Error: failed [400] Missing end boundary in multipart body.

Answer 1

固定边界

1. 如果您将边界定义为:BOUNDARY,
2. 然后每个子部分的开头标记为:--BOUNDARY
3. 消息的结尾标记为:--BOUNDARY--

你的边界定义为

Content-Type: multipart/form-data; boundary=---------------------------1408816255735

所以边界字符串是:------------------------1408816255735，其中已经有28个- (如果我算对了的话)，所以分隔符应该是 -- + 边界字符串，(而不是“只是边界字符串”)。

我会摆脱开销 ---------------------------- 因为如果前面的 -- 是否添加。

Content-Type: multipart/form-data; boundary=1408816255735

...

--1408816255735
Content-Disposition: form-data; name="file"; filename="test.png"

...

--1408816255735--

“多部分主体中缺少末端边界”错误

正如您所说，修复边界后的问题是:Missing end boundary in multipart body。

您可能还需要在结束标记后使用 '\r\n' ;)。由于 var bodyString = bodyParts.join('\r\n'); 没有将\r\n 放在最后一个元素之后，我认为这是必需的。 (我们在评论中的讨论表明情况并非如此，所以...)

...所以我怀疑 Content-Length 设置不正确(它应该是字节计数而不是字符串中字符的计数)。由于不需要 Content-Length - 也许可以不使用它。 (在这种情况下，这恰好是正确的猜测)。

二进制数据

好的，到现在为止我们修复了给定代码中的错误。正如您现在所说，多部分请求已成功解析，但当它尝试将发送的数据解释为 PNG 图像时，您会收到服务器错误。

我不知道你是如何获得二进制数据的——没有相关代码。假设在 partd 的循环中 value.data 是带有图像字节的 nodejs 缓冲区，我会尝试使用:

_.each(parts, function (value, key) {
    bodyParts.push(
        '--' + boundary,
        'Content-Disposition: form-data; name="' + key + '"; filename="' + 
                value.filename + '"',
        'Content-Transfer-Encoding: base64',
        'Content-Type: ' + value.contentType,
        '',
        value.data.toString('base64'));
});