【发布时间】：2012-08-12 16:44:40
【问题描述】：
我正在创建一个使用 Google Drive API 的 Google Chrome 扩展程序。 我必须使用 HTML5 上传文件。
对于文本文件，没有问题。但是当我要上传二进制文件时，总是出错。
因此，当我使用 HTML5 中的 FileReader 作为 BinaryString 上传文件时，我的图像已损坏，无法读取。
当我使用 Base64 编码（正文部分中的标头“Content-Transfer-Encoding: base64”）时，我有一个 400 Bad Request -> Malformed multipart body。
你能帮帮我吗？ 谢谢:)
PS：我不想用Google Drive SDK，我更喜欢自己写代码。
var bb, reader;
var meta = {
"title": "mozilla.png",
"mimeType": "image/png",
"description": "Mozilla Official logo"
};
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://developer.mozilla.org/media/img/mdn-logo-sm.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e){
if(this.status == 200){
bb = new WebKitBlobBuilder();
bb.append(this.response);
console.log('Download OK');
reader = new FileReader();
reader.readAsDataURL(bb.getBlob('image/png'));
reader.onloadend = function(e){
console.log('Reader OK');
var bound = 287032396531387;
var parts = [];
parts.push('--' + bound);
parts.push('Content-Type: application/json');
parts.push('');
parts.push(JSON.stringify(meta));
parts.push('--' + bound);
parts.push('Content-Type: image/png');
parts.push('Content-Transfer-Encoding: base64');
parts.push('');
parts.push(reader.result);
parts.push('--' + bound + '--');
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://www.googleapis.com/upload/drive/v2/files?uploadType=multipart", true);
xhr.setRequestHeader("Authorization", "Bearer token123456");
xhr.setRequestHeader("Content-Type", "multipart/mixed; boundary=" + bound);
xhr.onload = function(e){
console.log("DRIVE OK", this, e);
};
xhr.send(parts.join("\r\n"));
}
}
};
xhr.send();
对于二进制上传，只需修改这一行：
reader.readAsDataURL(bb.getBlob('image/png'));
就这样
reader.readAsBinaryString(bb.getBlob('image/png'));
并删除这一行：
parts.push('Content-Transfer-Encoding: base64');
我尝试通过先发送元数据来创建文件，然后像 post 一样上传内容，但上传内容时总是出现 404 错误，但这是另一回事...
【问题讨论】：
标签： html file-upload google-drive-api