使用HTML5將文件上傳到Google Drive API

我正在創建使用Google Drive API的Google Chrome擴展程序。我必須上傳帶有HTML5的文件。使用HTML5將文件上傳到Google Drive API

對於文本文件，沒有問題。但是當我想上傳二進制文件時，總會有錯誤。

因此，當我使用HTML5中的FileReader作爲BinaryString上傳文件時，我的圖像已損壞，無法讀取它。

當我使用Base64編碼（在正文部分「Content-Transfer-Encoding：base64」中），我有一個400錯誤請求 - >格式錯誤的多部分主體。

你能幫助我嗎？謝謝:)

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

，並刪除這一行：

我試圖創建一個文件通過首先發送元數據並上傳廣告在這個post後的內容一樣，我總是得到一個404錯誤上傳內容，但這是另一個故事...

來源

2012-08-12 Yacine Rezgui

其中只包含一個空行\ r \ n和沒有其他的空白需要被在請求結束時添加。嘗試後parts.push('--' + bound + '--');

編輯添加另一個parts.push('');：

首先，我想說的是，你不應該上傳爲原始二進制字符串，因爲你的二進制數據包含可能搞砸了你的要求和結果控制字符在損壞的文件中。數據應該在Base64中編碼。你可以閱讀更多here

如果您在調試檢查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，但因爲它是用來生產Data URI，格式爲data:[<MIME-type>][;charset=<encoding>][;base64],的字符串會添加到編碼數據的開頭。這是原因400 Bad Request錯誤的罪魁禍首（格式不正確的多體）。該解決方案是將它添加到請求主體之前消除這個字符串：

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

我已經測試並能正常工作。

來源

2012-08-13 04:06:01 KiL

我試過了，但它仍然不起作用。如果你想測試，像[POSTMAN Rest客戶端]（https://chrome.google.com/webstore/detail/fdmmgilgnpjigdojojpjoooidkmcomcm）一樣安裝一個完全可以上網的應用程序（用於XHR），並將代碼粘貼到Chrome Developer的控制檯中工具。如果您需要令牌，請轉到[Google OAuth Playground]（https://code.google。com/oauthplayground） – 2012-08-13 11:37:03

在編輯答案中添加了我的解決方案 – KiL 2012-08-13 15:33:16

你只是一個JavaScript忍者，謝謝你！ – 2012-08-13 17:58:21

使用HTML5將文件上傳到Google Drive API

回答

相關問題