OpenProject附件API调用失败求助：Fetch/Postman实现multipart/form-data

问题根源 #

你的代码和Postman调试失败主要有以下几个原因：

• 拼写错误：formData.append("metdata", ...) 里的 metdata 应为 metadata
• 元数据格式错误：API要求metadata部分是直接包含fileName的JSON对象，而非嵌套在metadata键下的结构
• 元数据未正确序列化：直接传入JS对象会被转为字符串[object Object]，需要序列化为JSON并指定application/json类型
• 文件对象错误：articleImages[0].src是图片URL字符串，不是实际的File对象，API无法识别
• Fetch配置错误：credentials是Fetch的顶层配置项，不应放在headers里

修正后的Fetch代码 #

// 从文件输入框获取实际File对象（示例）
const fileInput = document.getElementById('your-file-input');
const uploadFile = fileInput.files[0];

if (!uploadFile) {
  console.error('请选择要上传的文件');
  return;
}

const formData = new FormData();

// 构造元数据并转为Blob（指定application/json类型）
const metadata = {
  fileName: uploadFile.name, // 可自定义文件名，也直接用原文件名
  description: "Random Description"
};
const metadataBlob = new Blob([JSON.stringify(metadata)], { type: 'application/json' });
formData.append('metadata', metadataBlob);

// 添加文件
formData.append('file', uploadFile);

// 发送请求
fetch('https://***/api/v3/work_packages/***/attachments', {
  method: 'POST',
  headers: {
    'Authorization': 'Basic ' + btoa('apikey:***'),
    'referrer': ''
  },
  credentials: 'include', // 移到顶层配置项
  mode: 'cors',
  body: formData
})
.then(response => response.json())
.then(data => console.log('上传成功:', data))
.catch(error => console.error('上传失败:', error));

Postman正确配置步骤 #

1. 请求方法选POST，填入API地址
2. 在Headers中添加Authorization头，值为Basic 你的base64编码的apikey:***
3. 切换到Body标签，选择form-data类型
4. 添加第一个字段：
   • 键名：metadata
   • 类型选File，然后切换到Text模式，输入JSON内容：{"fileName": "test.jpg", "description": "测试附件"}
   • 手动设置该字段的Content-Type为application/json
5. 添加第二个字段：
   • 键名：file
   • 类型选File，选择本地要上传的文件
6. 发送请求即可

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