如何发送带有 Blob 的 http multipart POST 请求？

Question

我正在使用多部分 XMLHttpRequest 在 Google 云端硬盘帐户上上传文件，使用 google 文档中描述的语法：

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

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

*metadata Json object*

--delim
Content-Type: *datatype*

*data*
--delim--

我的问题是：

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

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

P.S.: 我知道我可以单独发送数据，然后编辑元数据，但它需要两个请求，
一个太多了...

Answer 1

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

对于 IE 9 及以下版本，需要不同的解决方案。 This question's top answer suggests using jQuery Form Plugin 作为与低版本 IE 兼容的替代方案。

经进一步检查，该插件似乎为所有不兼容的浏览器模拟了 FormData 对象。可以在 here.

找到独立的解决方案

Answer 2

我找到了答案，我必须在 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，为了简洁起见，我在这里进行了简化。

How to send an http multipart POST request with a Blob in it?