問題描述

我正在嘗試使用 Google API 將文件上傳到 Google 云端硬盤JavaScript 客戶端庫 和可恢復(fù)上傳類型.

I'm trying to upload files to Google Drive using Google APIs Client Library for JavaScript and resumable upload type.

我成功驗(yàn)證并獲取了上傳 URI，但在發(fā)送實(shí)際數(shù)據(jù)時(shí)遇到了問題.如果文件僅包含 ASCII 字符，則文件會(huì)成功發(fā)送到云端硬盤，但如果是特殊字符 (???) 或二進(jìn)制文件(例如 PNG)，則文件會(huì)損壞.我的猜測(cè)是，在進(jìn)程的某個(gè)地方，文件在客戶端被編碼為 un??icode.

I authenticate and get the upload URI successfully, but I ran into problems while sending the actual data. If the file contains only ASCII characters, the file is sent successfully to Drive, but in case of special characters (???) or binary file (such as PNG) the file gets corrupted. My guess would be that somewhere in the process the file is encoded to unicode in client side.

如果我使用btoa()"將原始數(shù)據(jù)編碼為 base64 并將標(biāo)頭Content-Encoding: base64"添加到數(shù)據(jù)發(fā)送請(qǐng)求中，則文件上傳正常.然而，使用這種方法會(huì)增加 33% 的開銷，這在計(jì)劃上傳的文件大小為 100MB 到 1GB 時(shí)是相當(dāng)大的.

If I use "btoa()" to encode the raw data to base64 and add header "Content-Encoding: base64" to the data sending request, the file uploads fine. Using this method however increases the overhead for 33%, which is quite a lot when the planned upload size of files is 100MB to 1GB.

以下是一些代碼示例:

獲取可續(xù)傳的上傳 URI:

Getting the resumable upload URI:

// Authentication is already done
var request = gapi.client.request({
    "path": DRIVE_API_PATH, // "/upload/drive/v2/files"
    "method": "POST",
    "params": {
        "uploadType": "resumable"
    },
    "headers": {
        "X-Upload-Content-Type": self.file.type,
        //"X-Upload-Content-Length": self.file.size
        // If this is uncommented, the upload fails because the file size is
        // different (corrupted file). Manually setting to the corrupted file
        // size doesn't give 400 Bad Request.
    },
    "body": {
        // self.file is the file object from <input type="file">
        "title": self.file.name, 
        "mimeType": self.file.type,
        "Content-Lenght": self.file.size,
    }
});

一次性發(fā)送整個(gè)文件:

// I read the file using FileReader and readAsBinaryString
// body is the reader.result (or btoa(reader.result))
// and this code is ran after the file has been read
var request = gapi.client.request({
    "path": self.resumableUrl, // URI got from previous request
    "method": "PUT",
    "headers": {
        //"Content-Encoding": "base64", // Uploading with base64 works
        "Content-Type": self.file.type
    },
    "body": body
});

我錯(cuò)過了什么嗎?是否可以以二進(jìn)制流上傳文件?我是使用 HTML 和 Javascript 上傳文件的新手，我還沒有找到任何使用可恢復(fù)上傳的 Google Javascript 庫的示例.SO中有類似問題沒有答案.

Am I missing something? Is it possible to upload file in binary stream? I am new to uploading files in HTML and Javascript and I haven't found any examples using Google Javascript library with resumable upload. There is similar question in SO with no answers.

推薦答案

Blob 類型是 XMLHttpRequest 實(shí)現(xiàn)的熱門話題，但它們并不真正成熟.我建議您堅(jiān)持使用 base64 編碼.Google 的 JavaScript 客戶端庫不支持可恢復(fù)上傳，因?yàn)榭蛻舳藶g覽器應(yīng)用不太可能將非常大的文件直接上傳到 Google 云端硬盤.

Blob types are a hot topic for XMLHttpRequest implementations and they are not truly mature. I'd recommend you to stick with base64 encoding. Google's JavaScript client lib doesn't support resumable uploads because it's very unlikely that a client side browser app uploads very large files directly to Google Drive.

這篇關(guān)于使用 javascript 進(jìn)行 Google Drive 可恢復(fù)上傳的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！