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,以便用户能够重新选择图片。
通过这种方式,我们可以只预览一张图片并阻止上传多张图片。