Angular gapi 将简单文本上传到 Google Drive [英] Angular gapi upload simple text to Google Drive

问题描述

我正在尝试使用 gapi 将一个简单的文本文件上传到 Angular 中的 Google Drive，但我找不到如何实际填充该文件.我设法验证并创建了一个文件，然后我想使用 update 函数来更新文件的内容，如 此处在 Google Drive API v3 文档中.

I am trying to upload a simple text file to Google Drive in Angular using gapi, but I can't find how to actually populate the file. I managed to authenticate and create a file, and then I wanted to use the update function to update the file's contents as described here in the Google Drive API v3 documentation.

这是我的 Angular 代码:

Here is my Angular code:

创建文件:

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 调用中传递内容.

This creates the file and I can see it in my Drive's root folder. Then I try to add the contents of this file (using the file ID of the file I just created) but it is not clear to me from the documentation how to pass the content in the update call.

  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 调用中传递内容

I also tried to pass the content directly in the create call, based on the example they give in the documentation (link above)

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

虽然这也不起作用.

推荐答案

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

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

Unfortunately, in the current stage, it seems that gapi.client.drive.files.create cannot still send the request including the content. Ref And, when I tested the update method using gapi now, I think that gapi.client.drive.files.update cannot also send the request including the content.

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

So in this case, it is required to use a workaround. In this workaround, fetch is used. When fetch is used, the request of multipart/form-data is easily created.

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

In this pattern, the text file is uploaded to Google Drive by including the content using the create method with fetch.

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的update方法用fetch<更新/代码>.

Pattern 2:

In this pattern, the text file is created by gapi.client.drive.files.create, and the created text file is updated by the update method of Drive API with 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));
});

参考:

• 使用 Fetch
• 文件:创建
• 文件:更新

这篇关于Angular gapi 将简单文本上传到 Google Drive的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！