jsx代码片段:fieldProps 为传给upload 的属性;
``` <ProFormUploadButton
name="viewIcon"
label="浏览器图标"
width="md"
max={1}
fileList={fileList}
fieldProps={{
name: 'multipartFile',
accept: ".png,.jpg,.jpeg",
listType: 'picture-card',
onPreview: ViewChromIcon,
method: "POST",
data: { imageType: 1 },
headers: {
'x-auth-token': sessionStorage.getItem('loginToken')
}
}}
action="/api/v1/factories/upload"
beforeUpload={beforeUpload}
onChange={handleChange}
extra="推荐尺寸:50*50px,文件大小不超过4M"
/>
<Modal open={previewOpen} title={previewTitle} footer={null} onCancel={() => setPreviewOpen(false)}>
<img alt="example" style={{ width: '100%' }} src={fileList[0]?.['thumbUrl']} />
</Modal>
函数代码块
const [fileList, setFileList] = useState<UploadFile[]>([]);
const [previewOpen, setPreviewOpen] = useState(false);
const limitSize = (file) => {
const isLt4M = file.size / 1024 / 1024 < 4;
if (!isLt4M) {
message.error('图片大小不超过4M');
return false
} else {
return true
}
}
const beforeUpload = (file: RcFile) => {
return limitSize(file);
};
const ViewChromIcon = (file) => {
setPreviewOpen(true);
setPreviewTitle(file['name'])
return false
}