Google Drive API 浏览器端创建文件时内容未写入问题求助

• 浏览器端的gapi.client.drive原生方法不支持media参数，该参数仅为NodeJS版Google API客户端的专属实现。你之前调用files.create时传入的media字段被直接忽略，仅创建了文件元数据，实际生成的是0字节的空文件，因此读取时返回空内容。
• 调用files.get读取文件内容的代码也存在参数缺失，默认调用files.get仅返回文件元数据，要读取文件二进制/文本内容必须额外指定alt: 'media'参数。

前置检查 #

确保你的Google API授权时申请了足够的权限，推荐使用权限范围：

• https://www.googleapis.com/auth/drive.file：仅访问当前应用创建的文件，权限范围更小更安全
• https://www.googleapis.com/auth/drive：可访问用户Drive内的全部文件

第一步：修改文件上传逻辑 #

浏览器端需要手动构造multipart/related格式的请求上传带内容的文件，参考实现代码如下：

const content = "this is some content";
const fileName = "my-file.txt";
const mimeType = "text/plain";

// 构造multipart请求边界标识
const boundary = "-------314159265358979323846";
const delimiter = `\r\n--${boundary}\r\n`;
const closeDelimiter = `\r\n--${boundary}--`;

// 组装multipart请求体
const multipartRequestBody =
  delimiter +
  "Content-Type: application/json\r\n\r\n" +
  JSON.stringify({ name: fileName, mimeType: mimeType }) +
  delimiter +
  `Content-Type: ${mimeType}\r\n\r\n` +
  content +
  closeDelimiter;

// 发送上传请求
const response = await gapi.client.request({
  path: "https://www.googleapis.com/upload/drive/v3/files",
  method: "POST",
  params: { uploadType: "multipart", fields: "id" },
  headers: {
    "Content-Type": `multipart/related; boundary="${boundary}"`,
  },
  body: multipartRequestBody,
});

const fileId = response.result.id;

第二步：修改文件读取逻辑 #

读取文件内容时补充alt: 'media'参数，代码如下：

const { body } = await gapi.client.drive.files.get({
  fileId: fileId,
  alt: "media"
});

console.log(body) // 输出 "this is some content"

内容的提问来源于stack exchange，提问作者Abir Taheer