Antd Upload组件无法上传PDF文件问题求助

问题现象 #

使用Ant Design Upload组件上传PDF文件时，触发错误提示dropdown.pdf file upload failed，尝试教程及第三方仓库方案后问题仍未解决。

代码问题分析 #

你的代码存在几个关键问题，直接导致上传失败：

1. 重复的accept属性冲突：Upload组件的props、Upload标签、Button标签上重复设置了不同的accept规则，造成文件筛选逻辑混乱，可能误拦截PDF文件。
2. 多余的独立上传按钮：页面中额外添加的<Button onClick={fetch}>Upload</Button>无实际上传逻辑，且与Antd Upload自带的上传机制冲突，造成混淆。
3. 组件导出名称不匹配：定义的组件名为Dropdown，但导出时写为DropDown（大小写不一致），会导致组件引用错误，影响渲染逻辑。
4. Mock接口兼容性问题：使用的mock接口可能不支持PDF文件上传，或返回状态不符合Antd Upload的预期，触发错误状态。

修复后的代码 #

import React from 'react'
import { Upload, message, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

const Dropdown = () => {
    const props = {
        name: 'file',
        // 替换为实际支持PDF上传的后端接口地址
        action: '/your-real-upload-api',
        accept: ".pdf",
        // 可选：添加文件格式前置校验
        beforeUpload: (file) => {
            const isPDF = file.type === 'application/pdf';
            if (!isPDF) {
                message.error('仅支持上传PDF格式文件!');
            }
            return isPDF || Upload.LIST_IGNORE;
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }

            if (info.file.status === 'done') {
                message.success(`${info.file.name} 文件上传成功`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} 文件上传失败`);
            }
        },
    };

    return (
        <div>
            <h1>Dropdown</h1>
            <div>
                <Upload {...props}>
                    <Button icon={<UploadOutlined />}>
                        点击上传
                    </Button>
                    <p>选择要上传的文件</p>
                </Upload>
            </div>
        </div>
    )
}

export default Dropdown

额外调试建议 #

• 验证后端接口：确认你的上传接口支持PDF文件接收，检查接口请求方法、Content-Type配置及文件大小限制。
• 查看网络请求：打开浏览器开发者工具（F12）的Network标签，查看上传请求的状态码和响应内容，定位是接口错误还是前端逻辑问题。
• 检查文件权限：确保上传的PDF文件未被占用或无读取权限。

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