Angular gapi 将简单文本上传到 Google Drive

Question

我正在尝试使用gapi 将一个简单的文本文件上传到 Angular 中的 Google Drive，但我找不到实际填充文件的方法。我设法验证并创建了一个文件，然后我想使用update 函数来更新文件的内容，如here in the Google Drive API v3 documentation 所述。

这是我的 Angular 代码：

创建文件：

createFile() {
    return gapi.client.drive.files.create({
      resource: {
        name: `test.csv`
      }
    }).then(response => {
      console.log("Response", response.result.id);
      return response.result.id;
    })
  }

这会创建文件，我可以在驱动器的根文件夹中看到它。然后我尝试添加这个文件的内容（使用我刚刚创建的文件的文件 ID），但是从文档中我不清楚如何在 update 调用中传递内容。

  updateFile(fileId) {
    return gapi.client.drive.files.update({
      fileId: fileId,
      body: "this is the content of my file"
    }).then(response => {
      console.log("Response", response);
    })
  }

我还尝试根据他们在文档中给出的示例（上面的链接）直接在 create 调用中传递内容

  createFile() {
    return gapi.client.drive.files.create({
      resource: {
        name: `test.csv`
      },
      media: {
        body: "this is the content of my file"
      }
    }).then(response => {
      console.log("Response", response.result.id);
    })
  }

虽然这也不起作用。

Answer 1

• 您想通过使用 Javascript 包含内容来将文本文件上传到 Google 云端硬盘。
• 您已经能够使用 Drive API 为 Google Drive 获取和创造价值。
• 您的访问令牌可用于将文件上传到 Google 云端硬盘。

问题和解决方法：

不幸的是，在当前阶段，gapi.client.drive.files.create 似乎仍然无法发送包含内容的请求。 Ref 并且，我现在用gapi 测试更新方法时，我认为gapi.client.drive.files.update 也不能发送包含内容的请求。

所以在这种情况下，需要使用解决方法。在此解决方法中，使用了fetch。当使用fetch 时，很容易创建multipart/form-data 的请求。

模式一：

在此模式中，文本文件通过使用 fetch 的 create 方法包含内容来上传到 Google Drive。

示例脚本：

const content = 'this is the content of my file';
const metadata = {name: 'test.txt', mimeType: 'text/plain'};
let form = new FormData();
form.append('metadata', new Blob([JSON.stringify(metadata)], {type: 'application/json'}));
form.append('file', new Blob([content], {type: 'text/plain'}));
fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart', {
  method: 'POST',
  headers: new Headers({'Authorization': 'Bearer ' + gapi.auth.getToken().access_token}),
  body: form
})
.then(res => res.json())
.then(val => console.log(val));

模式 2：

在此模式中，文本文件由gapi.client.drive.files.create创建，创建的文本文件由Drive API的更新方法更新为fetch。

示例脚本：

gapi.client.drive.files.create({resource: {name: 'test.txt'}})
.then(response => {
  const fileId = response.result.id;
  const content = 'this is the content of my file';
  const metadata = {name: 'test.txt', mimeType: 'text/plain'};
  let form = new FormData();
  form.append('metadata', new Blob([JSON.stringify(metadata)], {type: 'application/json'}));
  form.append('file', new Blob([content], {type: 'text/plain'}));
  fetch('https://www.googleapis.com/upload/drive/v3/files/' + fileId + '?uploadType=multipart', {
    method: 'PATCH',
    headers: new Headers({'Authorization': 'Bearer ' + gapi.auth.getToken().access_token}),
    body: form
  })
  .then(res => res.json())
  .then(val => console.log(val));
});

参考资料：

• Using Fetch
• Files: create
• Files: update