上传使用文件,以谷歌云端硬盘API HTML5(Upload a file to Google Dr

2019-07-30 22:05发布

我创建它使用谷歌云端硬盘API谷歌的Chrome扩展。 我要上传与HTML5的文件。

对于文本文件,是没有问题的。 但是,当我想上传一个二进制文件,总有错误。

所以,当我上传使用HTML5作为BinaryString,我的形象被破坏了的FileReader一个文件,我无法阅读。

当我(在身体的一部分“内容传输编码:BASE64”用标题)使用Base64编码,我有一个400错误的请求 - >畸形多体。

你能帮我吗 ? 谢谢 :)

PS:我不想使用谷歌驱动器的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');

我试图通过先发送元数据来创建一个文件并上传等之后的内容在这个岗位 ,我总是得到一个404错误上传内容,但这是另一个故事...

Answer 1:

在您的请求结束添加只由\ r \ n和没有其他空白需要一个空行。 尝试添加另一个parts.push('');parts.push('--' + bound + '--');

编辑:

首先,我想说的是,因为你的二进制数据包含可能搞砸了你的请求,并在文件损坏导致控制字符,你不应该上传为原始二进制字符串。 数据应以Base64编码。 你可以阅读更多在这里

如果您检查reader.result在调试,它将包含:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD4AAABHCAMAAABoMgR/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJlQTFRFAAAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAEgICExAQIAQFIyAgLwYHMjAwPggJQkBATAoLUlBQWwwOYmBgaQ4QcXBweBASgYCAhxIUkIKCkY+PlRQXoZ+fpBYZrYaGsK+vsxgbwL+/wRod0Bwg0M/P3h4i4N/f7SAk7+/v9pCS////7yG8VgAAAA90Uk5TABAgMEBQYHCAn6+/z9/vBoviEQAABBtJREFUWMOtmA13mzoMhumWdd3uWpuPACUEWIkXA3HI+P8/7kq2AYOBNj1Tz2nA9oOl10KAHUfZw+7p4/b41ZnY7j9yn708PQzww09yv7186+lf5FP2qHBJJ1y0H7am9JCR8z/BAa3bOy1B/zH+lzW6KJt3+CfHeYSfYqGboX9eylRMC5FB/7Pj/IBRdicPoTkOMMIgZWlAEmtIBn1fHFjx0JIGPQt40wiWSZGoZ/Mc2ncLuMgoABAQpXCWEi9hraAWv4KXFP1G1dIYBVSy1ha/iHOM12PzmdLU4hfwBhUj6VRKnqA/GfBxvYWLVCbjMDVLwrBoUOM9/JXAw0rWazgqhp63LMTIa4+mjBdeCiMl2IoyNq4wxWWaoGUwGzjASKxiKALwq6gHj+AK5RyXaaIMZoaxgga9AmlipWu5LJ1ISKwZNYVsnEmeeR66Z+O45KzPaBF7ujkkibkWRSiC0MbVkusxhLShbOesxcCCjI+J1WYWLhItXI9DAy5ASNtel3C4hIUXtBeOyduXkpKTgPGYZI3qqU6R319ihgtIELCABBi1ktcTMvvTNtZ4lXent1fpRRIuSVfj7Jzrw6ARnDcYlEyJox9dSHeqLsdXlyzimVF4CqyfWZYCmkBtxHzz96RyT+djl5PUxmXexaO+ZEhDfdfJ4nNwo4qQeo43Wt/WiERaahZodMJ1UaIJLrJ+LmZ6rxesqM1bn6oQTbzm0goyJii4ystErydN+qqNpSwUK9WGDmkndAbWKuS+akN+6Fpk4zKEelCud4SNzzVQNxMr1UY9ubTQsSEDRFCXiewN16pNraUPWsFl0tP5Hd6USbla61A6Jp9YWG2YIaIZyGalDWXe1BCennCQkX4Ah0rrieEBaJQIU4hVnI2612b6yhR69xnX0PGOyUbfOWVts+D9DBeBMWMw+s7wmsHgl41TXSuGwHG2YP4w98KpBT3e2/iOUszfOOrll6sJXppKN9aryBru59J+/x1sciLtTz63Q49H3Wes+nf4Fby59h2nPD+pJmln1QHnZ8VBWzXF8fig6SsZmrRFFz0b/kKdJSS3cVIp/NXCiXtR5/stPBpimuPkVZ/nGziRsUUGjhes9tjQD7ls4D7qRma41AIwPeS2jpO3rvMtvFO66CHHDdy95eQdnFTrODzB3sX94zLu9/3ruBziLuORctw9r+N5pKdYwm/y4m/VBn5113G5aPtuC+/OGzimTGXhp3Hdc5XSa/gF7xsD31fV+eiOWQfUzV3Hu/w2wQc7DPiQ+wrHL6mbEegivr+NeKfX/Si/pL7Jk03cR59GHBcol/+f1Veke7m/VmGl/A74d0yV6jP0s/yGl5X+cL7eUSXffFXl/8H3u/Pw4zO7Bztj7+Le7YdnY+9C7Zw8fnznZDfsnPwP488L21waSrUAAAAASUVORK5CYII=

正如可以看到的, readAsDataURL方法DID编码数据为base64但由于它被用于产生数据的URI ,与格式作为字符串data:[<MIME-type>][;charset=<encoding>][;base64],在加入的开始你的编码数据。 这是原因的罪魁祸首400 Bad Request错误(格式错误的多体)。该解决方案是将它添加到请求主体之前消除这种字符串:

parts.push(reader.result.replace(/^data:image\/(png|jpg);base64,/, ""));

我已经测试并能正常工作。



文章来源: Upload a file to Google Drive API using HTML5