Google Drive API Files.Get返回异常格式，如何转为Base64展示图片？

我正尝试使用Google Drive API存储图片并在需要时检索。通过JavaScript上传至Drive的功能运行正常，但调用files.get()请求获取特定文件ID时，返回的数据格式异常（查看响应头可知为gzip编码）。尝试过使用ArrayBuffer并调用toString('base64')转换，但没有效果，想知道如何将其转换为Base64格式以便在前端展示图片。

上传代码 #

const uploadFile = async (fileObject) => {
  const bufferStream = new stream.PassThrough();
  bufferStream.end(fileObject.buffer);

  const { data } = await driveService.files.create({
    media: {
      mimeType: fileObject.mimeType,
      body: bufferStream,
    },
    requestBody: {
      name: fileObject.originalname,
      parents: [folderId],
    },
    fields: "id,name,webViewLink",
  });
  return data;
};

原获取请求代码 #

try{
    const id = req.body.id;
    driveService.files
      .get({
        fileId: id,
        alt: "media",
      })
      .then(
        function (response) {
          res.status(200).json(response);
        },
        function (reason) {
          throw reason;
        }
      );
  } catch (e) {
    console.error(e);
    res.status(400).send(e.message);
  }

1. 修改后端获取逻辑，正确处理二进制数据 #

核心是禁用gzip压缩并指定响应类型为二进制，再转换为Base64格式返回给前端。修改后的代码如下：

try {
  const id = req.body.id;
  driveService.files.get({
    fileId: id,
    alt: "media",
    // 禁用gzip压缩，获取原始二进制数据
    headers: { 'Accept-Encoding': 'identity' },
    // 指定响应类型为arraybuffer，避免自动解析为乱码字符串
    responseType: 'arraybuffer'
  })
  .then(response => {
    // 将ArrayBuffer转为Buffer，再生成Base64编码
    const base64Data = Buffer.from(response.data).toString('base64');
    // 拼接成前端可直接使用的Data URI格式
    const mimeType = response.headers['content-type'];
    const dataUri = `data:${mimeType};base64,${base64Data}`;
    res.status(200).json({ dataUri });
  })
  .catch(err => {
    console.error(err);
    res.status(400).send(err.message);
  });
} catch (e) {
  console.error(e);
  res.status(400).send(e.message);
}

2. 关键步骤说明 #

• 禁用gzip：通过Accept-Encoding: identity请求头，告知Google Drive不要返回压缩后的内容，直接返回原始二进制数据，避免自动解压后出现乱码。
• 指定响应类型：设置responseType: 'arraybuffer'确保获取到的是未被篡改的二进制数据，而不是被自动解析为字符串的异常内容。
• 转换为Base64：利用Node.js的Buffer对象将ArrayBuffer转为可操作的二进制缓冲区，再调用toString('base64')生成Base64编码，最后拼接成Data URI，前端可以直接将其作为图片的src值使用。

3. 前端展示示例 #

拿到后端返回的dataUri后，直接赋值给图片元素即可：

// 示例：通过fetch请求获取图片Data URI
fetch('/your-api-endpoint', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ id: '目标文件ID' })
})
.then(res => res.json())
.then(data => {
  const imgElement = document.createElement('img');
  imgElement.src = data.dataUri;
  document.body.appendChild(imgElement);
});

内容的提问来源于stack exchange，提问作者Yashpal Rajput