Ant Design Upload组件默认支持多图片上传,并且可以预览上传的所有图片。如果需要只预览一张图片,可以通过设置beforeUpload
函数来限制只上传一张图片,并将预览限制为只显示一张图片。
以下是一个示例代码:
import React, { useState } from 'react';
import { Upload, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
const App = () => {
const [fileList, setFileList] = useState([]);
const beforeUpload = (file) => {
// 只允许上传一张图片
setFileList([file]);
return false; // 阻止默认上传行为
};
const handleRemove = () => {
setFileList([]);
};
return (
}>选择图片
);
};
export default App;
在上述代码中,我们通过useState
钩子来管理fileList
的状态,然后在beforeUpload
函数中只将第一张上传的图片设置为fileList
。同时,我们还定义了一个handleRemove
函数来清空fileList
,以便用户能够重新选择图片。
通过这种方式,我们可以只预览一张图片并阻止上传多张图片。