如何将Puppeteer生成的截图上传至Cloudinary或谷歌云存储？

Cloudinary 上传失败修复方案 #

你当前代码未上传成功的核心原因是：page.screenshot() 无参数调用时返回的是 Buffer 二进制数据流，Cloudinary 官方的 upload 方法默认不支持直接传入 Buffer 格式的参数。

修复后可运行的完整代码 #

// 1. 截图时指定编码为base64，无需额外转换
const screenshotBase64 = await page.screenshot({ encoding: 'base64' });
// 2. 拼接为符合要求的base64 URI格式
const uploadResource = `data:image/png;base64,${screenshotBase64}`;

try {
  // 3. 执行上传
  const uploadRes = await cloudinary.uploader.upload(uploadResource, {
    folder: 'puppeteer-screenshots' // 可选参数，指定云端存储文件夹方便管理
  });
  // uploadRes.secure_url 即为可直接在React前端渲染的HTTPS图片链接
  console.log('上传成功链接：', uploadRes.secure_url);
} catch (err) {
  // 可通过打印错误快速定位配置/权限问题
  console.error('上传失败：', err);
}

注意事项 #

• 所有 Cloudinary 配置、Puppeteer 执行逻辑必须在服务端运行，禁止将 Cloudinary 的 api_secret 暴露在前端 React 代码中，会造成密钥泄露风险。
• 确保服务端运行环境的三个环境变量 CLOUD_NAME、API_KEY、API_SECRET 已正确加载。
• React 前端使用时，直接将返回的 secure_url 作为 img 标签的 src 属性值即可正常渲染。

谷歌云存储（GCS）简易实现方案 #

如果需要切换到谷歌云存储，可参考以下代码实现：

1. 先安装依赖：npm install @google-cloud/storage
2. 服务端上传代码：

const { Storage } = require('@google-cloud/storage');
// 初始化GCS实例，可通过环境变量配置密钥避免硬编码
const storage = new Storage({
  keyFilename: '你的GCP服务账号密钥文件路径'
});
// 指定存储桶
const bucket = storage.bucket('你创建的GCS存储桶名称');

// 生成截图Buffer
const screenshotBuffer = await page.screenshot();
// 生成存储文件名，避免重名
const fileName = `screenshots/${Date.now()}_${Math.random().toString(36).slice(2)}.png`;
const file = bucket.file(fileName);

// 写入存储桶
const writeStream = file.createWriteStream({
  contentType: 'image/png',
  resumable: false
});

writeStream.on('finish', async () => {
  // 按需设置文件公共可读权限，也可通过存储桶权限统一配置
  await file.makePublic();
  // 生成可公开访问的链接，直接传给React前端使用即可
  const publicUrl = `https://storage.googleapis.com/${bucket.name}/${fileName}`;
  console.log('GCS上传成功：', publicUrl);
});

writeStream.end(screenshotBuffer);

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