Google api 如何从GooglePicker上的选定文件中获取blob

我正在使用GooglePicker和React，得到的结果是一个对象数组

[
  {
    "id": "1...m",
    "serviceId": "docs",
    "mimeType": "image/jpeg",
    "name": "name.jpg",
    "description": "",
    "type": "photo",
    "lastEditedUtc": 1575388407136,
    "iconUrl": "https://drive-thirdparty.googleusercontent.com/16/type/image/jpeg",
    "url": "https://drive.google.com/file/d/1...m/view?usp=drive_web",
    "embedUrl": "https://drive.google.com/file/d/1...m/preview?usp=drive_web",
    "sizeBytes": 111364,
    "rotation": 0,
    "rotationDegree": 0,
    "parentId": "0...A"
}]

所以我试着通过

https://www.googleapis.com/drive/v3/files

并直接通过

file.url

使用

const fetchOptions={headers:{Authorization:`Bearer${accessToken}`}

docs.forEach((file) => {
  ...
  fetch(file.url, fetchOptions).then((res) => {
    const blob = res.blob();
    uploadFile(blob);
  });
});

但是我得到了
403
或
CORS
；我尝试在选择器中设置
relayUrl
，但这导致选择器损坏

注:

我的auth2中有以下3个作用域：
    ['https://www.googleapis.com/auth/drive.file',
    'https://www.googleapis.com/auth/drive',
    'https://www.googleapis.com/auth/drive.readonly']```


我将我的计算机的带有端口和协议的url设置为授权JavaScript源和授权重定向URI
有什么想法吗


编辑1：

我也尝试过像这样使用Google API：

const FILE_URL = 'https://www.googleapis.com/drive/v3/files';
const url = isDoc
        ? `${FILE_URL}/${file.id}/export?mimeType=${mimeType}`
        : `${FILE_URL}/${file.id}?alt=media`;

      fetch(url, fetchOptions).then((res) => {
        const blob = res.blob();
        uploadFile(blob);
      });


您将需要驱动器API
从你的问题来看，你似乎在尝试用谷歌Picker做任何事情。但是，选择器只能为文件获取有限的元数据，因此您可以使用您的帐户打开它们（即在另一个窗口中查看它们）或让您上载文件。如果要下载实际文件，则需要使用驱动器API


流程可能是：


让用户选择文件
获取元数据对象
从对象中提取文件id
调用驱动器API（使用
alt='media'
）

如果我误解了，并且您已经在使用驱动器API，那么查看与此相关的代码会有所帮助

裁判



)

编辑：
下面是一个使用Picker API的示例，它使用同一个登录客户端，通过
gapi
将数据馈送到驱动器API中

HTML


谷歌选择器示例
授权
退出

JS

const API_KEY='AI…'；
const CLIENT_ID='44…'；
const appId=“44…”；
常量范围=[”https://www.googleapis.com/auth/drive"];
const DISCOVERY_DOCS=[
"https://www.googleapis.com/discovery/v1/apis/drive/v3/rest",
];
const authorizeButton=document.getElementById（“授权按钮”）；
const signburatton=document.getElementById（“注销按钮”）；
//使用Google API加载程序脚本加载Google.picker脚本。
函数handleClientLoad（）{
load（“客户机：auth2:picker”，initClient）；
}
函数initClient（）{
gapi.client.init({
API密钥：API_密钥，
clientId:客户端ID，
发现文档：发现文档，
作用域：作用域[0]
})
.那么(
函数（）{
//侦听登录状态的更改。
gapi.auth2.getAuthInstance（）.isSignedIn.listen（handleSignIn）；
//处理初始登录状态。
handleSignIn（gapi.auth2.getAuthInstance（）.isSignedIn.get（））；
authorizeButton.onclick=handleAuthClick；
SignerButton.onclick=handleSignoutClick；
},
函数（错误）{
appendPre（JSON.stringify（error，null，2））；
}
);
}
功能手柄信号（isSignedIn）{
如果（伊西涅丁）{
authorizeButton.style.display=“无”；
signexputton.style.display=“block”；
createPicker（）；
}否则{
authorizeButton.style.display=“block”；
signexputton.style.display=“无”；
}
}
函数handleAuthClick（事件）{
gapi.auth2.getAuthInstance（）.signIn（）；
}
函数handleSignoutClick（事件）{
gapi.auth2.getAuthInstance（）.signOut（）；
}
函数createPicker（）{
const token=gapi.client.getToken（）.access\u token
如果（令牌）{
让view=newgoogle.picker.view（google.picker.ViewId.DOCS）；
view.setMimeTypes（“image/png，image/jpeg，image/jpg”）；
让picker=new google.picker.PickerBuilder（）
.enableFeature（google.picker.Feature.NAV_隐藏）
.enableffeature（google.picker.Feature.MULTISELECT\u已启用）
.setAppId（appId）
.setOAuthToken（令牌）
.addView（视图）
.addView（新的google.picker.DocsUploadView（））
.setDeveloperKey（API_键）
.setCallback（getFile）
.build（）；
picker.setVisible（true）；
}
}
函数getFile（pickerResp）{
gapi.client.drive.files
.得到({
fileId:pickerResp.docs[0].id，
alt:“媒体”
})
。然后（resp=>{
日志（“获取响应”，响应状态）
设binary=resp.body
//编辑-从加布里埃VVV增加
设l=binary.length
let array=新的Uint8Array（l）；
对于（var i=0；iHi:）是的，我也试着像这样使用google api：
const url=isDoc？`${FILE\u url}/${FILE.id}/export？mimeType=${mimeType}`:`${FILE\u url}/${FILE.id}？alt=media`；fetch（url，fetchOptions）。然后（（res）=>{..
其中
文件的URL
是
常量文件的URL=https://www.googleapis.com/drive/v3/files“；
但这给了我一个机会，你能解释一下你想做什么样的过程吗？用户选择文件的目的是什么？我有一个通用的上传存储，所以用户选择文件，这样我就可以得到文件的副本并上传到我自己的存储并显示在我的应用程序中。因此，我需要blob或公共url…@Gabrielle-我用简单的JS更新了我的答案。这对你有用吗？我得到了以下信息：
conv20提供程序错误：尝试访问blob时，文件似乎不是有效的图像（idx 0）