在Ant Design中,可以使用beforeUpload
属性来限制只显示允许上传的项目,您可以通过以下代码示例来实现:
import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
function App() {
const allowedFileTypes = ['.jpg', '.png', '.gif']; // 允许上传的文件类型
const beforeUpload = (file) => {
const fileExtension = file.name.split('.').pop(); // 获取文件扩展名
const isAllowed = allowedFileTypes.includes(`.${fileExtension}`);
if (!isAllowed) {
message.error(`只允许上传以下文件类型: ${allowedFileTypes.join(', ')}`);
}
return isAllowed;
};
return (
}>上传文件
);
}
export default App;
在上面的代码中,我们首先定义了允许上传的文件类型数组allowedFileTypes
,然后使用beforeUpload
函数来判断文件的扩展名是否在允许的文件类型中。如果不在允许的文件类型中,将显示一个错误提示信息。最后,将beforeUpload
函数传递给Upload
组件的beforeUpload
属性。
这样,当用户选择文件时,只会显示允许上传的项目,不符合的文件类型将被阻止上传,并显示错误提示信息。