如何在浏览器中通过Google Drive API上传JSON字符串数据

在浏览器环境中，直接将JSON字符串作为media.body传入会导致文件识别异常，原因是gapi在浏览器端要求媒体内容为Blob或File对象，而非原始字符串。以下是可行的实现方案：

完整代码示例 #

// 定义要上传的JSON数据
const targetJson = {
  appConfig: "demo",
  version: "1.0.0",
  settings: { darkMode: true }
};
const jsonString = JSON.stringify(targetJson);

// 文件元数据，指定带扩展名的文件名
const fileMetadata = {
  name: "config.json"
};

// 将JSON字符串转换为Blob对象，适配浏览器媒体格式要求
const media = {
  mimeType: "application/json",
  body: new Blob([jsonString], { type: "application/json" })
};

// 执行上传的异步函数
async function uploadJsonFile() {
  try {
    const result = await gapi.client.files.create({
      resource: fileMetadata,
      media: media,
      fields: "id, name, mimeType"
    });
    console.log(`文件上传成功：名称=${result.data.name}，ID=${result.data.id}，类型=${result.data.mimeType}`);
  } catch (err) {
    console.error("上传失败：", err);
  }
}

关键说明 #

1. Blob转换：通过new Blob([jsonString], { type: "application/json" })将JSON字符串转为浏览器可识别的媒体对象，确保Drive API能正确解析文件内容和类型。
2. 元数据设置：fileMetadata.name必须明确包含.json扩展名，避免生成无标题文件。
3. 权限验证：确保已完成gapi的授权流程，且授权范围包含https://www.googleapis.com/auth/drive.file或足够的Drive操作权限。

内容的提问来源于stack exchange，提问作者Kélio Minervino