本文介绍了使用HTML5将文件上传到Google Drive API的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在创建一个使用Google Drive API的Google Chrome扩展程序。
我必须使用HTML5上传文件。



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

所以,当我使用HTML5中的文件读取器上传文件为BinaryString,我的图像已损坏,我当我使用Base64编码(正文部分Content-Transfer-Encoding:base64中的标题)时,我有一个400错误的要求 - >格式错误的多部分身体。



您能帮我吗?
感谢:)

我不想使用Google Drive SDK,我更喜欢写下所有的代码。

  var bb,reader; 

var meta = {
title:mozilla.png,
mimeType:image / png,
description:Mozilla官方标志
;

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\\\
));
}
}
};

xhr.send();

对于Binary Upload,只需修改这一行:

  reader.readAsDataURL(bb.getBlob( '图像/ PNG')); 

by

  reader.readAsBinaryString(bb.getBlob( '图像/ PNG')); 

并删除此行:

  parts.push('Content-Transfer-Encoding:base64'); 

我尝试通过首先发送元数据创建一个文件,然后像这个,我总是得到一个404错误上传内容,但这是另外一个故事...

解决方案

只包含\ r \ n而没有其他的空行需要在请求结束时添加空格。尝试在 parts.push(' - '+ bound +' - ');之后添加另一个 parts.push(''); / code>



编辑:

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



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

 数据:图像/ PNG; BASE64,iVBORw0KGgoAAAANSUhEUgAAAD4AAABHCAMAAABoMgR / AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJlQTFRFAAAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAAwAAEgICExAQIAQFIyAgLwYHMjAwPggJQkBATAoLUlBQWwwOYmBgaQ4QcXBweBASgYCAhxIUkIKCkY + PlRQXoZ + fpBYZrYaGsK + vsxgbwL + / wRod0Bwg0M / P3h4i4N / f7SAk7 + / v9pCS //// 7yG8VgAAAA90Uk5TABAgMEBQYHCAn6 + / Z9 / vBoviEQAABBtJREFUWMOtmA13mzoMhumWdd3uWpuPACU​​EWIkXA3HI + 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 /硅/ pL7Jk03cR59GHBcol / + f1Veke7m / VmGl / A74d0yV6jP0s / yGl5X + cL7eUSXffFXl / 8H3u / Pw4zO7Bztj7 + Le7YdnY + 9C7Zw8fnznZD你可以看到, readAsDataURL    


$> >方法DID将数据编码为base64,但由于它用于生成,字符串格式为 data:[< MIME-type>] [; charset =< encoding>]; [; base64],被添加到编码数据的开头。这是罪魁祸首原因 400错误请求错误(格式错误的多部分主体)。解决方案是消除此字符串之前,将其添加到请求正文:

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

我已经测试过了,它能正常工作。


I'm creating a Google Chrome extension which use Google Drive API.I have to upload a file with HTML5.

For text files, there is no problem. But when I want to upload a binary file, there are always errors.

So when I upload a file using the FileReader in HTML5 as BinaryString, my image is corrupted, I can't read it.

And when I use Base64 encoding (with the header in the body part "Content-Transfer-Encoding: base64"), I have a 400 Bad Request -> Malformed multipart body.

Can you help me please ?Thanks :)

PS: I don't want to use Google Drive SDK, I prefer write all the code.

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();

For Binary Upload, just modify this line :

reader.readAsDataURL(bb.getBlob('image/png'));

by that

reader.readAsBinaryString(bb.getBlob('image/png'));

and delete this line :

parts.push('Content-Transfer-Encoding: base64');

I tried to create a file by sending the metadata first and upload the content after like in this post and I always get a 404 error for uploading the content, but this is another story...

解决方案

An empty line which consists of only \r\n and no other whitespace need to be added at the end of your request. Try to add another parts.push(''); after parts.push('--' + bound + '--');

Edit:

First, I want to say that you should not upload file as raw Binary String because your binary data contains control characters which may screw up your request and results in corrupted file. Data should be encoded in Base64. You can read more here

If you check reader.result in debug, it will contain:

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=

As you can see, the readAsDataURL method DID encode your data to base64 but because it is used to produce Data URI , a string with format as data:[<MIME-type>][;charset=<encoding>][;base64], is added at the begin of your encoded data. This is the culprit cause 400 Bad Request error (Malformed multipart body).The solution is to eliminate this string before adding it to the request body:

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

I have tested and it works fine.

这篇关于使用HTML5将文件上传到Google Drive API的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-20 16:34
查看更多