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

修复边界

如果您将边界定义为：BOUNDARY，
然后每个子部分的开头都标有：--BOUNDARY
并且消息的结尾标有：--BOUNDARY--

您的边界定义为

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

所以边界字符串是：---------------------------1408816255735，已经有28 -（如果我算得正确），那么分隔符应该是-- +边界字符串，（不是＆＃ 34;只是边界字符串＆＃34;）。

我会摆脱开销---------------------------，因为如果添加了前面的--，它就会模糊不清。

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

...

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

...

--1408816255735--

＆＃34;在多部分体内缺少结束边界＆＃34;错误

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

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

...所以我怀疑Content-Length被设置为incorectly（它应该是字节数而不是字符＆＃39;在字符串中计数）。由于内容长度不是必需的 - 也许没有它也可以尝试。（在这种情况下，这恰好是正确的猜测。）

二进制数据

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

我不知道你是如何得到二进制数据的 - 没有代码。假设在你的循环中，partd value.data是nodejs Buffer with image bytes我会尝试：

_.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')
  }
};

在JavaScript中生成用于文件上载的HTTP多部分主体

2 个答案: