Question

我有一种创建工作表并将其上传到Google云端硬盘的方法。当用户点击显示“创建报告”的按钮时，该报告即会创建并上传到用户google驱动器。效果很好。但是，将工作表保存到Google驱动器后，来自Google的响应不包含工作表ID或工作表URL。用户说，当他们单击“创建报告”按钮时，他们希望将Google工作表保存到其Google驱动器后在新标签页中打开。他们不想进入驱动器来手动打开文件。我在想，上传工作表后返回的响应至少应包含工作表ID或在Google驱动器中创建的资源的URL。有谁对我要完成的事情有想法吗？我正在使用Google API将文件上传到用户驱动器。

以下是工作表上传后收到的回复

   "https://www.googleapis.com/upload/drive/v3/files? 
   uploadType=multipart&fields=id%2Cname%2Ckind", redirected: false, 
   status: 200, ok: true, …}
   body: ReadableStream
   bodyUsed: false
   headers: Headers {}
   ok: true
   redirected: false
   status: 200
   statusText: ""
   type: "cors"
   url: "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart&fields=id%2Cname%2Ckind"

 //Here is the code: 
           let metadata = {
                name: excelFileName,
                mimeType: "application/vnd.google-apps.spreadsheet",
            };
            let form = new FormData();
            form.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
            form.append('file', excelFile);
            let url = new URL('https://www.googleapis.com/upload/drive/v3/files');
            url.search = new URLSearchParams({ uploadType: 'multipart', fields: 'id,name,kind' });
            try {
                let res = await fetch(url, {
                    method: 'POST',
                    headers: new Headers({ 'Authorization': 'Bearer ' + gapi.auth.getToken().access_token }),
                    body: form
                });


                if (res.ok) {
                    console.log(gapi)
                    console.log(res)
                    alert(`"${excelFileName}" has successfully saved to your google drive!`);
                } else {
                    console.error(`Encounter a problem saving excel file, ${excelFileName}, to google drive`);
                }
            } catch (ex) {
                console.error(`Oops excel file for "${excelFileName}" wasn't saved. ${error}`)
            }

Answer 1

上载文件时，要检索上载文件的文件ID和URL。
您想通过修改当前脚本来实现。

如果我的理解是正确的，那么该修改如何？

修改点：

在这种情况下，为了返回文件ID和URL，将使用这些字段。
- exportLinks,id,kind,name,webContentLink,webViewLink
为了从res检索返回的值，它使用res.json()。

当上述修改点反映到脚本中时，它如下所示。

修改后的脚本：

请按如下所示修改脚本的2部分。

从：

url.search = new URLSearchParams({ uploadType: 'multipart', fields: 'id,name,kind' });

至：

url.search = new URLSearchParams({ uploadType: 'multipart', fields: 'exportLinks,id,kind,name,webContentLink,webViewLink' });

和

从：

if (res.ok) {
  console.log(gapi)
  console.log(res)

至：

if (res.ok) {
  res.json().then((value) => {
    console.log(value)
  });

参考文献：

如果我误解了您的问题，而这不是您想要的方向，我深表歉意。

Answer 2

您需要进行2次更改才能从文件中获取URL：

1）您必须在搜索参数的字段之间添加webViewLink属性[1]： url.search = new URLSearchParams（{uploadType：'multipart'，field：'id，name，kind，webViewLink'}）;

此属性是在网络上打开文件的链接。

2）您获得的响应主体是ReadableStream，您需要将其转换为可以操纵的json对象。可以使用json（）函数[2]完成您要获取的响应，此操作会将返回的响应正文解析为具有以下属性的Json对象：id，webViewLink等。

我调整并测试了您的代码，并按预期工作，在警报消息中显示了新创建文件的URL：

let metadata = {
name: excelFileName,
mimeType: "application/vnd.google-apps.spreadsheet",
};
let form = new FormData();
form.append('metadata', new Blob([JSON.stringify(metadata)], { type: 'application/json' }));
form.append('file', excelFile);
let url = new URL('https://www.googleapis.com/upload/drive/v3/files');
url.search = new URLSearchParams({ uploadType: 'multipart', fields: 'id,name,kind,webViewLink' });
try {

    const res = await fetch(url, {
        method: 'POST',
        headers: new Headers({ 'Authorization': 'Bearer ' + gapi.auth.getToken().access_token}),
        body: form
    });

    //Convert response to json
    const resJson = await res.json();

    if (res.ok) {
        console.log(gapi);
        console.log(res);
        console.log(resJson);
        alert(`"${excelFileName}" has successfully saved to your google drive!: ` + resJson.webViewLink);
    } else {
        console.error(`Encounter a problem saving excel file, ${excelFileName}, to google drive:` + res.Json);
    }
} catch (ex) {
    console.error(`Oops excel file for "${excelFileName}" wasn't saved. ${ex}`)
}

上面的所有代码当然都在同步功能中，以便能够使用await语句。

[1] https://developers.google.com/drive/api/v3/reference/files#resource

[2] https://developer.mozilla.org/en-US/docs/Web/API/Body/json

通过API创建工作表后如何获取Google工作表ID？

2 个答案:

修改点：

修改后的脚本：

参考文献：