如何通过Discord Webhook发送HTML文件上传框中的图片

HTML结构 #

先搭建基础的上传界面，包含文件选择框和发送按钮：

<input type="file" id="imageUpload" accept="image/*">
<button id="sendToDiscord">发送到Discord</button>

• accept="image/*" 用来限制只能选择图片文件，避免无效上传。

JavaScript逻辑 #

接下来编写核心的上传逻辑，关键是利用FormData构造符合Discord Webhook要求的请求：

// 获取DOM元素
const imageInput = document.getElementById('imageUpload');
const sendBtn = document.getElementById('sendToDiscord');

// 绑定按钮点击事件
sendBtn.addEventListener('click', async () => {
    // 获取选中的图片文件
    const file = imageInput.files[0];
    if (!file) {
        alert('请先选择一张图片');
        return;
    }

    // 验证是否为图片类型
    if (!file.type.startsWith('image/')) {
        alert('请选择图片格式的文件');
        return;
    }

    // 构建FormData对象，Discord要求文件字段名为'file'
    const formData = new FormData();
    formData.append('file', file);

    try {
        // 发送POST请求到你的Discord Webhook URL
        const response = await fetch('你的Discord Webhook URL', {
            method: 'POST',
            body: formData
        });

        if (response.ok) {
            alert('图片发送成功');
            imageInput.value = ''; // 清空文件选择框
        } else {
            const errorData = await response.json();
            alert(`发送失败：${errorData.message || '未知错误'}`);
        }
    } catch (error) {
        alert(`请求出错：${error.message}`);
    }
});

你之前的问题分析 #

你写的var media = media完全是错误的——变量名重复赋值，而且没有从DOM中获取实际的文件输入元素。正确的做法是用document.getElementById('media')获取元素，再通过.files[0]拿到选中的文件。

注意事项 #

• 替换代码中的你的Discord Webhook URL为你自己的Webhook地址，注意不要把这个URL泄露给他人，否则别人可以随意往你的频道发消息。
• 浏览器的跨域政策可能会影响请求，如果你的页面是本地打开（file://协议），可能需要部署到服务器或者使用本地开发服务器（比如Live Server）来测试。

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