您将需要 Drive API
从你的问题来看，你似乎正在尝试用 Google Picker 做所有事情。但是，选择器只会为您提供文件的有限元数据，因此您可以使用您的帐户打开它们（即在另一个窗口中查看它们）或让您上传文件。如果你想download实际文件，那么您将需要使用 Drive API。
适用于浏览器 JavaScript 的 Drive 快速入门 https://developers.google.com/drive/api/v3/quickstart/js
流程可能是：
- 让用户选择文件
- 获取元数据对象
- 从对象中提取文件ID
- 调用 Drive API (get https://developers.google.com/drive/api/v3/reference/files/get with
alt='media')
如果我误解了，并且您已经在使用 Drive API，那么查看相关代码将会很有帮助。
Ref
- 快速开始 https://developers.google.com/drive/api/v3/quickstart/js
- get https://developers.google.com/drive/api/v3/reference/files/get
-
export https://developers.google.com/drive/api/v3/reference/files/export)
EDIT:
以下是使用 Picker API 向 Drive API 提供信息的示例gapi使用相同的登录客户端。
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Google Picker Example</title>
</head>
<body>
<button id="authorize_button" style="display: none;">Authorize</button>
<button id="signout_button" style="display: none;">Sign Out</button>
<div id="result"></div>
<script type="text/javascript" src="script.js"></script>
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
</body>
</html>
JS
const API_KEY = 'AI...';
const CLIENT_ID = '44...';
const appId = "44...";
const SCOPES = ["https://www.googleapis.com/auth/drive"];
const DISCOVERY_DOCS = [
"https://www.googleapis.com/discovery/v1/apis/drive/v3/rest",
];
const authorizeButton = document.getElementById("authorize_button");
const signoutButton = document.getElementById("signout_button");
// Use the Google API Loader script to load the google.picker script.
function handleClientLoad() {
gapi.load("client:auth2:picker", initClient);
}
function initClient() {
gapi.client.init({
apiKey: API_KEY,
clientId: CLIENT_ID,
discoveryDocs: DISCOVERY_DOCS,
scope: SCOPES[0]
})
.then(
function () {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(handleSignIn);
// Handle the initial sign-in state.
handleSignIn(gapi.auth2.getAuthInstance().isSignedIn.get());
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
},
function (error) {
appendPre(JSON.stringify(error, null, 2));
}
);
}
function handleSignIn(isSignedIn) {
if (isSignedIn) {
authorizeButton.style.display = "none";
signoutButton.style.display = "block";
createPicker();
} else {
authorizeButton.style.display = "block";
signoutButton.style.display = "none";
}
}
function handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}
function handleSignoutClick(event) {
gapi.auth2.getAuthInstance().signOut();
}
function createPicker() {
const token = gapi.client.getToken().access_token
if (token) {
let view = new google.picker.View(google.picker.ViewId.DOCS);
view.setMimeTypes("image/png,image/jpeg,image/jpg");
let picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.setAppId(appId)
.setOAuthToken(token)
.addView(view)
.addView(new google.picker.DocsUploadView())
.setDeveloperKey(API_KEY)
.setCallback(getFile)
.build();
picker.setVisible(true);
}
}
function getFile(pickerResp) {
gapi.client.drive.files
.get({
fileId: pickerResp.docs[0].id,
alt: 'media'
})
.then(resp => {
console.log("fetch response", resp.status)
let binary = resp.body
// EDIT - addition from Gabrielle vvvv
let l = binary.length
let array = new Uint8Array(l);
for (var i = 0; i<l; i++){
array[i] = binary,charCodeAt(i);
}
let blob = new Blob([array], {type: 'application/octet-stream'});
// EDIT - addition from Gabrielle ^^^^
}
此代码改编自驱动器快速入门 https://developers.google.com/drive/api/v3/quickstart/js和选择器快速入门 https://developers.google.com/picker/docs.
Note- 这确实会在控制台中给出错误，但它似乎确实可以正常工作。这似乎确实是选择器的一个错误 -https://issuetracker.google.com/177046274 https://issuetracker.google.com/177046274
加布里埃尔编辑
Note- 使用 get withalt = media适用于二进制文件。要获取表格/文档/幻灯片等，您需要使用export终点。
