mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

demo: upload replace modal to image (#48105)

Browse Source
This commit is contained in:
叶枫 2024-03-27 09:49:50 +08:00 committed by GitHub
parent 3e156b0a7f
commit b1a3972b81
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 36 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/upload/demo/file-type.tsx
View File

@ -8,7 +8,7 @@ import {
PictureTwoTone, PictureTwoTone,
PlusOutlined, PlusOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { Modal, Upload } from 'antd'; import { Image, Upload } from 'antd';
import type { GetProp, UploadFile, UploadProps } from 'antd'; import type { GetProp, UploadFile, UploadProps } from 'antd';
type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0]; type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
@ -54,8 +54,6 @@ const App: React.FC = () => {
}, },
]); ]);
const handleCancel = () => setPreviewOpen(false);
const handlePreview = async (file: UploadFile) => { const handlePreview = async (file: UploadFile) => {
if (!file.url && !file.preview) { if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj as FileType); file.preview = await getBase64(file.originFileObj as FileType);
@ -113,9 +111,17 @@ const App: React.FC = () => {
> >
{fileList.length >= 8 ? null : uploadButton} {fileList.length >= 8 ? null : uploadButton}
</Upload> </Upload>
<Modal open={previewOpen} footer={null} onCancel={handleCancel}> {previewImage && (
<img alt="example" style={{ width: '100%' }} src={previewImage} /> <Image
</Modal> wrapperStyle={{ display: 'none' }}
preview={{
visible: previewOpen,
onVisibleChange: (visible) => setPreviewOpen(visible),
afterOpenChange: (visible) => !visible && setPreviewImage(''),
}}
src={previewImage}
/>
)}
</> </>
); );
}; };

20
components/upload/demo/picture-card.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import { Modal, Upload } from 'antd'; import { Image, Upload } from 'antd';
import type { GetProp, UploadFile, UploadProps } from 'antd'; import type { GetProp, UploadFile, UploadProps } from 'antd';
type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0]; type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
@ -16,7 +16,6 @@ const getBase64 = (file: FileType): Promise<string> =>
const App: React.FC = () => { const App: React.FC = () => {
const [previewOpen, setPreviewOpen] = useState(false); const [previewOpen, setPreviewOpen] = useState(false);
const [previewImage, setPreviewImage] = useState(''); const [previewImage, setPreviewImage] = useState('');
const [previewTitle, setPreviewTitle] = useState('');
const [fileList, setFileList] = useState<UploadFile[]>([ const [fileList, setFileList] = useState<UploadFile[]>([
{ {
uid: '-1', uid: '-1',
@ -56,8 +55,6 @@ const App: React.FC = () => {
}, },
]); ]);
const handleCancel = () => setPreviewOpen(false);
const handlePreview = async (file: UploadFile) => { const handlePreview = async (file: UploadFile) => {
if (!file.url && !file.preview) { if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj as FileType); file.preview = await getBase64(file.originFileObj as FileType);
@ -65,7 +62,6 @@ const App: React.FC = () => {
setPreviewImage(file.url || (file.preview as string)); setPreviewImage(file.url || (file.preview as string));
setPreviewOpen(true); setPreviewOpen(true);
setPreviewTitle(file.name || file.url!.substring(file.url!.lastIndexOf('/') + 1));
}; };
const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) => const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>
@ -88,9 +84,17 @@ const App: React.FC = () => {
> >
{fileList.length >= 8 ? null : uploadButton} {fileList.length >= 8 ? null : uploadButton}
</Upload> </Upload>
<Modal open={previewOpen} title={previewTitle} footer={null} onCancel={handleCancel}> {previewImage && (
<img alt="example" style={{ width: '100%' }} src={previewImage} /> <Image
</Modal> wrapperStyle={{ display: 'none' }}
preview={{
visible: previewOpen,
onVisibleChange: (visible) => setPreviewOpen(visible),
afterOpenChange: (visible) => !visible && setPreviewImage(''),
}}
src={previewImage}
/>
)}
</> </>
); );
}; };

20
components/upload/demo/picture-circle.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import { Modal, Upload } from 'antd'; import { Image, Upload } from 'antd';
import type { GetProp, UploadFile, UploadProps } from 'antd'; import type { GetProp, UploadFile, UploadProps } from 'antd';
type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0]; type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
@ -16,7 +16,6 @@ const getBase64 = (file: FileType): Promise<string> =>
const App: React.FC = () => { const App: React.FC = () => {
const [previewOpen, setPreviewOpen] = useState(false); const [previewOpen, setPreviewOpen] = useState(false);
const [previewImage, setPreviewImage] = useState(''); const [previewImage, setPreviewImage] = useState('');
const [previewTitle, setPreviewTitle] = useState('');
const [fileList, setFileList] = useState<UploadFile[]>([ const [fileList, setFileList] = useState<UploadFile[]>([
{ {
uid: '-1', uid: '-1',
@ -38,8 +37,6 @@ const App: React.FC = () => {
}, },
]); ]);
const handleCancel = () => setPreviewOpen(false);
const handlePreview = async (file: UploadFile) => { const handlePreview = async (file: UploadFile) => {
if (!file.url && !file.preview) { if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj as FileType); file.preview = await getBase64(file.originFileObj as FileType);
@ -47,7 +44,6 @@ const App: React.FC = () => {
setPreviewImage(file.url || (file.preview as string)); setPreviewImage(file.url || (file.preview as string));
setPreviewOpen(true); setPreviewOpen(true);
setPreviewTitle(file.name || file.url!.substring(file.url!.lastIndexOf('/') + 1));
}; };
const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) => const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>
@ -70,9 +66,17 @@ const App: React.FC = () => {
> >
{fileList.length >= 8 ? null : uploadButton} {fileList.length >= 8 ? null : uploadButton}
</Upload> </Upload>
<Modal open={previewOpen} title={previewTitle} footer={null} onCancel={handleCancel}> {previewImage && (
<img alt="example" style={{ width: '100%' }} src={previewImage} /> <Image
</Modal> wrapperStyle={{ display: 'none' }}
preview={{
visible: previewOpen,
onVisibleChange: (visible) => setPreviewOpen(visible),
afterOpenChange: (visible) => !visible && setPreviewImage(''),
}}
src={previewImage}
/>
)}
</> </>
); );
}; };