如何发送包含 Blob 的 http 多部分 POST 请求？

Question

我使用 multipart XMLHttpRequest 在 Google Drive 帐户上上传文件，使用 google 文档中描述的语法：

https://developers.google.com/drive/web/manage-uploads#multipart

这是请求正文的简化示例。

--delim
Content-Type: application/json; charset=UTF-8

*metadata Json object*

--delim
Content-Type: *datatype*

*data*
--delim--

我的问题是：

• 我正在使用 JavaScript
• 我必须将数据作为 Blob 发送
• 我无法使用 Google 的 JavaScript API
• 它必须与 Internet Explorer 兼容（至少 9）。

如您所见，请求由 2 个字符串组成，中间有一个 blob。
但是，如果我进行像“a-”+ blob +“-b”这样的连接，我当然会得到字符串“a-[object Blob]-b”

那么，如何发送包含我的 blob 和元数据的请求？

PS：我知道我可以单独发送数据，然后编辑元数据，但是需要两个请求，
一个太多...

Answer 1

我找到了答案，我必须在 Base 64 中对我的 Blob 的内容进行编码：

var reader = new FileReader
reader.readAsDataURL(blob)
var data = reader.result;
//don't need type informations
data = data.split(",").pop();

在请求的第二部分中的“Content-Type”值之后，我添加了这一行：

'Content-Transfer-Encoding: base64'

现在它起作用了！

别担心，在我的代码中，我以异步方式使用了 FileReader，为了简洁起见，我只是在此处进行了简化。

Answer 2

FormData对象运行良好，但与 IE < 10 不兼容。

对于 IE 9 及以下版本，需要不同的解决方案。 这个问题的最佳答案建议使用jQuery Form Plugin作为与低版本 IE 兼容的替代方案。

经过进一步检查，该插件似乎模拟了所有不兼容浏览器的 FormData 对象。 可在此处找到针对此的独立解决方案。