Google Drive可恢复使用javascript进行上传 [英] Google Drive resumable upload with javascript

问题描述

我尝试使用 Google API将文件上传到Google云端硬盘适用于JavaScript的客户端库和可恢复的上传类型。

我验证并成功获取上传URI，但发送实际数据时遇到了问题。如果文件仅包含ASCII字符，则文件将成功发送到Drive，但是如果出现特殊字符（ääö）或二进制文件（如PNG），文件将被损坏。如果我使用btoa（）来将原始数据编码为base64，并且使用btoa（）来编码，那么这个文件将被编码为客户端的unicode。向数据发送请求添加头Content-Encoding：base64，文件上传正常。然而，使用这种方法会增加33％的开销，当文件的计划上传大小为100MB到1GB时，这是相当多的。

以下是一些代码示例： / p>

获取可恢复的上传URI：

  //认证已完成
 var request = gapi.client.request（{$ b $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 
 //如果未注释，则上传失败，因为文件大小为
 // //不同（损坏的文件）手动设置损坏的文件
 //大小不会给出400错误请求
}，
body：{
 // self.file是来自< input type =file> 
title的文件对象：self.file.name，
 mimeType：self.file.type，
Content-Lenght：self.file.size，
} 
}）; 
  

一次发送整个文件：

  //我使用FileReader和readAsBinaryString读取文件
 // body是reader.result（或者btoa（reader.result））
 //并且这个代码在读取文件后运行
 var request = gapi.client.request（{
path：self.resumableUrl，//从前一个请求获得的URI 
method： PUT，
headers：{
 //Content-Encoding：base64，//上传base64作品
Content-Type：self.file.type 
}，
body：body 
}）; 
  

我错过了什么吗？是否有可能在二进制流上传文件？我是新来的上传文件在HTML和Javascript，我还没有找到任何使用谷歌JavaScript库的可恢复上传的例子。 SO中有类似问题，但没有答案。

解决方案

Blob类型是 XMLHttpRequest 实现的热门话题，它们并不真正成熟。我建议你坚持base64编码。 Google的JavaScript客户端库不支持可恢复的上传，因为客户端浏览器应用程序不太可能将非常大的文件直接上传到Google云端硬盘。

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

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.

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.

Here are some code examples:

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

Sending the whole file in one go:

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

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 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.

这篇关于Google Drive可恢复使用javascript进行上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！