使用Pageres+Hubot获取网页截图后无法上传至Slack求助

我明白你现在已经搞定了网页截图的生成，但卡在了用Hubot把截图传到Slack这一步。结合你描述的场景，我整理了几个最常见的排查方向，你可以逐一核对：

1. 先确认Slack应用的权限配置 #

这是最容易踩坑的点：

• 登录Slack开发者后台，找到你的Hubot应用，进入「OAuth & Permissions」页面，检查Scopes里有没有添加files:write权限。没有这个权限的话，Slack会直接拒绝上传请求。添加后记得重新把应用安装到你的工作区，新权限才会生效。
• 同时确认机器人的token（一般存在环境变量HUBOT_SLACK_TOKEN里）是有效的，没有过期或者权限范围不对。

2. 检查截图文件的状态 #

既然Pageres已经生成了截图，得确保你读取的文件是正常的：

• 先手动去生成截图的目录看看文件是否存在、大小是否正常（比如不是0KB），避免路径拼写错误或者Pageres输出路径和你预期的不一致。
• 在代码里加个日志验证文件读取：

  const screenshotPath = './your-screenshot-path.png';
  fs.stat(screenshotPath, (err, stats) => {
    if (err) console.error('文件不存在:', err);
    else console.log('文件大小:', stats.size);
  });
  

  如果文件不存在或者大小异常，那问题出在截图生成后的路径处理上。

3. 核对Slack上传API的请求格式 #

Slack的files.upload接口要求用multipart/form-data格式发送请求，不能用普通的JSON或表单提交。如果你用的是request库，正确的请求写法应该是这样的：

request.post({
  url: 'https://slack.com/api/files.upload',
  headers: {
    'Authorization': `Bearer ${process.env.HUBOT_SLACK_TOKEN}`
  },
  formData: {
    channels: '#target-channel', // 替换成你的目标频道名（带#）或频道ID
    file: fs.createReadStream(screenshotPath),
    filename: 'page-screenshot.png',
    title: '网页截图'
  }
}, (err, res, body) => {
  if (err) {
    console.error('上传请求出错:', err);
    msg.reply('截图上传失败啦');
    return;
  }
  // 解析Slack的返回结果，这一步能帮你快速定位问题
  const slackResponse = JSON.parse(body);
  if (!slackResponse.ok) {
    console.error('Slack API返回错误:', slackResponse.error);
    msg.reply(`上传失败，Slack提示: ${slackResponse.error}`);
  } else {
    msg.reply('截图上传成功！');
  }
});

这里要注意几个细节：

• 必须用formData字段来传递文件和参数，不能用form或json。
• channels参数要准确，写错频道名或者频道不存在都会导致失败。
• 一定要解析并检查Slack返回的ok字段和error字段，Slack会直接告诉你失败原因（比如not_in_channel、missing_scope等）。

4. 确保异步流程正确 #

Pageres生成截图是异步操作，你必须等截图完全生成后再调用上传API，不能提前读取文件。比如用Promise的方式等待Pageres完成：

new Pageres({ delay: 2000 }) // 加个延迟确保页面加载完全（可选但推荐）
  .src(msg.match[1], msg.match[3] || '1920x1080') // 假设第一个匹配组是URL，第三个是分辨率
  .dest('./screenshots')
  .run()
  .then(() => {
    // 截图生成完成后，再执行上传逻辑
    const screenshotPath = `./screenshots/${your-filename}.png`;
    // 这里放上传Slack的代码
  })
  .catch(err => {
    console.error('生成截图失败:', err);
    msg.reply('截图生成失败了');
  });

如果你的代码里没有等待Pageres的run()完成就去读取文件，大概率会读到空文件或者不存在的文件，导致上传失败。

5. 检查文件大小限制 #

虽然截图一般不会太大，但Slack对上传文件有大小限制（免费版通常是1GB以内），如果你的截图超出限制也会失败。可以查看生成的截图大小，必要时压缩后再上传。

如果上面的排查都没解决问题，建议你把完整的上传代码片段，以及Slack API返回的错误信息贴出来，这样能更精准地定位问题。

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