Angular 8调用Slack API files.upload上传文件返回invalid_form_data错误

从用户本地系统选择文件、通过Slack files.upload 接口直传到指定频道是完全可行的。你当前遇到的 invalid_form_data 报错，是前端接口调用的常见踩坑场景。

手动在请求头中硬编码 Content-Type: multipart/form-data 是前端发送FormData请求的典型误区：
标准的multipart/form-data请求头需要附带浏览器自动生成的boundary分隔符，用来区分请求体中的不同表单字段。当你手动写死这个Content-Type值时，会覆盖HTTP客户端自动生成的、带正确boundary的请求头，Slack服务端无法解析没有有效边界的表单内容，就会返回invalid_form_data错误。

删除手动设置Content-Type的逻辑即可，不需要为FormData请求额外配置multipart相关的请求头，前端HTTP客户端会自动生成符合规范的请求头：

upload(e) {
  this.file = e.target.files[0];

  var formData = new FormData();
  formData.append('token', SLACK_TOKEN);
  formData.append('channels', SLACK_CHANNELS);
  // 补充文件名字段，提升Slack端的文件元信息识别准确率
  formData.append('filename', this.file.name);
  formData.append('file', this.file);

  this.http.post<any>('https://slack.com/api/files.upload', formData).subscribe(
    resp => { console.log(resp) },
    error => { console.log(error) }
  );
}

• 确认FormData中file字段的值是原生File/Blob实例，你贴出的测试File对象结构符合接口要求，这块不存在问题
• 检查所用Slack Token的权限范围，必须包含files:writeScope，同时Token对应的应用/用户要有目标频道的发言上传权限
• 正式生产环境不要在前端代码中硬编码Slack Token，建议通过后端接口做中转上传，避免凭证泄露带来的安全风险

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