javascript - 如何在不使用 Blob 的情况下向多部分请求添加内容类型

Question

我正在使用 JavaScript 通过他们的 REST API 与 Salesforce 进行通信。他们希望 multipart/form-data 内容类型的请求正文格式非常具体:

--boundary_string
Content-Disposition: form-data; name="entity_document";
Content-Type: application/json

{  
    "Description" : "Marketing brochure for Q1 2011",
    "Keywords" : "marketing,sales,update",
    "FolderId" : "005D0000001GiU7",
    "Name" : "Marketing Brochure Q1",
    "Type" : "pdf"
}

--boundary_string
Content-Type: application/pdf
Content-Disposition: form-data; name="Body"; filename="2011Q1MktgBrochure.pdf"

Binary data goes here.

--boundary_string--

见 https://www.salesforce.com/us/developer/docs/api_rest/Content/dome_sobject_insert_update_blob.htm

通过下面的代码，我得到的请求正文非常接近他们预期的格式，除了它在第一个边界中不包含内容类型 (application/json)。

// Prepare binary data
var byteString = window.atob(objectData.Body);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);

for (var i = 0; i < byteString.length; i++) {
   ia[i] = byteString.charCodeAt(i);
}

var bb = new Blob([ab], { "type": "image/png" });

// Setup form
var formData = new FormData();
formData.append("entity_attachment", JSON.stringify({ data: '' }));
formData.append("Body", bb);

var request = new XMLHttpRequest();
request.open("POST", myurl);
request.send(formData);

此代码不会在第一个边界中放置序列化 JSON 的内容类型。这是需要的；事实上，通过 Fiddler，我能够确认当 Content-Type 文本存在于第一个边界部分时，请求处理得很好。

我尝试执行以下操作，它将序列化的 JSON 视为二进制数据，并具有提供内容类型的能力:

formData.append("entity_attachment", new Blob([JSON.stringify({ data: '' })], { "type": "application/json"}));

这会产生以下 HTTP:

Content-Disposition: form-data; name="entity_attachment"; filename="blob"
Content-Type: application/json
...

不幸的是，Salesforce 服务器给出了以下错误消息:

Cannot include more than one binary part

我能想到的将数据格式化为特定 Salesforce 正文格式的最后一种方法是手动构建请求正文；我尝试这样做，但我觉得尝试连接二进制文件很短，我不确定如何连接到一个字符串中。

我正在寻找任何建议以使我的请求正文与 Salesforce 的匹配。

Answer 1

This answer展示了如何手动构建包含二进制文件并绕过浏览器完成的标准 UTF-8 编码的多部分/表单请求主体。这是通过将整个请求作为 ArrayBuffer 传递来完成的。

这是我用来解决问题的代码(如 this answer 中所示):

    // {
//   Body: base64EncodedData,
//   ContentType: '',
//   Additional attachment info (i.e. ParentId, Name, Description, etc.)
// }

function uploadAttachment (objectData, onSuccess, onError) {
    // Define a boundary
    var boundary = 'boundary_string_' + Date.now().toString();
    var attachmentContentType = !app.isNullOrUndefined(objectData.ContentType) ? objectData.ContentType : 'application/octet-stream';

// Serialize the object, excluding the body, which will be placed in the second partition of the multipart/form-data request
var serializedObject = JSON.stringify(objectData, function (key, value) { return key !== 'Body' ? value : undefined; });

var requestBodyBeginning = '--' + boundary
    + '\r\n'
    + 'Content-Disposition: form-data; name="entity_attachment";'
    + '\r\n'
    + 'Content-Type: application/json'
    + '\r\n\r\n'
    + serializedObject
    + '\r\n\r\n' +
    '--' + boundary
    + '\r\n'
    + 'Content-Type: ' + attachmentContentType
    + '\r\n'
    + 'Content-Disposition: form-data; name="Body"; filename="filler"'
    + '\r\n\r\n';

var requestBodyEnd =
    '\r\n\r\n'
    + '--' + boundary + '--';

// The atob function will decode a base64-encoded string into a new string with a character for each byte of the binary data.
var byteCharacters = window.atob(objectData.Body);

// Each character's code point (charCode) will be the value of the byte.
// We can create an array of byte values by applying .charCodeAt for each character in the string.
var byteNumbers = new Array(byteCharacters.length);

for (var i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}

// Convert into a real typed byte array. (Represents an array of 8-bit unsigned integers)
var byteArray = new Uint8Array(byteNumbers);

var totalRequestSize = requestBodyBeginning.length + byteArray.byteLength + requestBodyEnd.length;

var uint8array = new Uint8Array(totalRequestSize);
var i;

// Append the beginning of the request
for (i = 0; i < requestBodyBeginning.length; i++) {
    uint8array[i] = requestBodyBeginning.charCodeAt(i) & 0xff;
}

// Append the binary attachment
for (var j = 0; j < byteArray.byteLength; i++, j++) {
    uint8array[i] = byteArray[j];
}

// Append the end of the request
for (var j = 0; j < requestBodyEnd.length; i++, j++) {
    uint8array[i] = requestBodyEnd.charCodeAt(j) & 0xff;
}

return $j.ajax({
    type: "POST",
    url: salesforceUrl,
    contentType: 'multipart/form-data' + "; boundary=\"" + boundary + "\"",
    cache: false,
    processData: false,
    data: uint8array.buffer,
    success: onSuccess,
    error: onError,
    beforeSend: function (xhr) {
        // Setup OAuth headers...
    }
});

};