如何使用JavaScript Fetch API向Discord Webhook同时上传JSON与文件？

问题分析 #

你当前代码的核心问题在于：

• 错误地将FormData对象转为JSON字符串发送，Discord Webhook接收带文件的请求必须使用multipart/form-data格式，而非JSON
• 传递文本配置的字段名应该是payload_json，不是json
• 手动设置Content-Type: application/json会覆盖FormData的正确头部，导致请求失败

修正后的代码 #

// 创建FormData对象
const discordWebHookBody = new FormData();

// 追加文件（map需为File或Blob对象，第三个参数可选，用于指定显示的文件名）
discordWebHookBody.append("file", map, "map.png");

// 追加JSON配置，必须转为字符串后再传入
discordWebHookBody.append("payload_json", JSON.stringify({
    "username": "Plane-notifier",
    "content": content
}));

// 发送请求，无需手动设置Content-Type，浏览器会自动处理
await fetch(this.config.discordWebhookUrl, {
    body: discordWebHookBody,
    method: "POST"
});

关键说明 #

• 文件处理：通过append("file", 文件对象[, 文件名])添加图片，Discord会自动解析并在消息中展示该文件
• 文本配置传递：必须用payload_json字段，且要将JSON对象转为字符串后再追加到FormData，这是Discord Webhook的规定格式
• 请求头部：无需手动设置Content-Type，浏览器会为FormData自动生成包含边界标识的multipart/form-data头部，确保Discord能正确解析请求内容

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