4

GoogleDriveAPIを使用するGoogleChrome拡張機能を作成しています。HTML5でファイルをアップロードする必要があります。

テキストファイルの場合、問題はありません。しかし、バイナリファイルをアップロードしたい場合、常にエラーが発生します。

そのため、HTML5のFileReaderをBinaryStringとして使用してファイルをアップロードすると、画像が破損し、読み取ることができません。

また、Base64エンコーディング(本文部分「Content-Transfer-Encoding:base64」のヘッダーを使用)を使用すると、400 Bad Request-> Malformedmultipartbodyが発生します。

手伝ってくれませんか?ありがとう :)

PS:Googleドライブ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エラーが発生しますが、これは別の話です...

4

1 に答える 1

5

\ 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にエンコードしますが、データURIdata:[<MIME-type>][;charset=<encoding>][;base64],の生成に使用されるため、エンコードされたデータの先頭に追加される形式の文字列です。これが原因400 Bad Requestエラー(不正なマルチパートボディ)です。解決策は、リクエストボディに追加する前に、この文字列を削除することです。

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

私はテストしました、そしてそれはうまく働きます。

于 2012-08-13T04:06:01.663 に答える