使用FB JS SDK上传图片至用户页面时遇324错误求助

问题根源 #

你用FormData传递参数的方式不符合FB JS SDK的要求，尤其是通过远程URL上传图片的场景，不需要用FormData包装参数，直接传普通键值对对象即可。另外还要确认权限配置是否到位。

修正步骤 #

1. 移除FormData，改用普通参数对象
   FB.api的POST请求接受普通JSON对象作为参数，封装成FormData反而会导致参数解析异常，尤其是使用url参数（远程图片地址）的场景。

2. 确认权限配置

   • 你的应用必须申请pages_manage_posts和pages_show_list权限
   • 用户授权时必须同意这些权限，否则页面访问令牌会缺少上传图片的权限

3. 验证图片URL的可访问性
   确保你提供的图片URL是公开可访问的，Facebook服务器需要能正常抓取到该图片资源。

修正后的代码 #

function uploadPhoto() {
  // 获取用户的页面列表
  FB.api('/me/accounts', function(response) {
    if (response && !response.error) {
      // 匹配目标页面的访问令牌
      let pageAccessToken = null;
      const targetPageId = '101674985359608';
      for (const page of response.data) {
        if (page.id === targetPageId) {
          pageAccessToken = page.access_token;
          console.log('找到目标页面:', page.id);
          break;
        }
      }

      if (!pageAccessToken) {
        console.log('未找到目标页面的访问令牌');
        return;
      }

      // 准备上传参数：直接用普通对象，不用FormData
      const photoParams = {
        url: 'https://patriciapick.com/wp-content/uploads/2023/02/20220803_180813-scaled.jpg',
        access_token: pageAccessToken,
        // 可选：添加图片描述
        caption: '上传的图片描述'
      };

      // 调用上传接口
      FB.api(`/${targetPageId}/photos`, 'POST', photoParams, function(response) {
        if (response && !response.error) {
          console.log('图片上传成功:', response);
        } else {
          console.log('上传错误:', response.error.message);
          console.log('错误详情:', response.error);
        }
      });
      
    } else {
      console.log('获取页面列表错误:', response.error.message);
    }
  });
}

额外排查点 #

• 如果仍然报错，检查页面访问令牌的权限：可以用Facebook官方的Access Token Debugger验证令牌是否包含pages_manage_posts权限
• 确认应用处于上线状态或者用户是应用的测试用户（否则权限可能无法正常生效）

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