在 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 协议方面的专家，我对生成 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

而服务器响应是：Error: failed [400] Invalid multipart request with 0 mime parts.

编辑 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 放在最后一个元素之后，我认为这是必需的。 （我们在 cmets 中的讨论表明情况并非如此，所以......）

...所以我怀疑 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'));
});

Answer 2

为了回答@Jared Martin 的问题，我没有计算内容长度。此解决方案仅适用于 base64。如果您想发送更大量的数据，则需要使用二进制格式并将响应组合为缓冲区。

FormData = function () {
    this._parts = {};
};

FormData.prototype.append = function (name, part) {
    this._parts[name] = part;
};

FormData.prototype.generate = function () {
    var boundary = Date.now();
  var bodyParts = [];

  _.each(this._parts, function (part, name) {
    part.data = (new Buffer(part.data)).toString('base64');

    bodyParts.push(
      '--' + boundary,
      'Content-Disposition: form-data; name="' + name + '"; filename="' + part.filename + '"',
      'Content-Type: ' + part.contentType,
      'Content-Transfer-Encoding: base64',
      '',
      part.data);
  });

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

  return {
    headers: {
      'Content-Type': 'multipart/form-data; boundary=' + boundary,
    },
    body: bodyParts.join('\r\n')
  }
};