mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 16:19:15 +08:00
7fd093bd0a
* docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type
115 lines
3.2 KiB
Markdown
115 lines
3.2 KiB
Markdown
---
|
|
order: 3
|
|
title:
|
|
zh-CN: 照片墙
|
|
en-US: Pictures Wall
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后,上传按钮消失。
|
|
|
|
## en-US
|
|
|
|
After users upload picture, the thumbnail will be shown in list. The upload button will disappear when count meets limitation.
|
|
|
|
```tsx
|
|
import React, { useState } from 'react';
|
|
import { Upload, Modal } from 'antd';
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
import type { UploadFile } from 'antd/es/upload/interface';
|
|
import type { RcFile, UploadProps } from 'antd/es/upload';
|
|
|
|
const getBase64 = (file: RcFile): Promise<string> =>
|
|
new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
reader.onload = () => resolve(reader.result as string);
|
|
reader.onerror = error => reject(error);
|
|
});
|
|
|
|
const App: React.FC = () => {
|
|
const [previewVisible, setPreviewVisible] = useState(false);
|
|
const [previewImage, setPreviewImage] = useState('');
|
|
const [previewTitle, setPreviewTitle] = useState('');
|
|
const [fileList, setFileList] = useState<UploadFile[]>([
|
|
{
|
|
uid: '-1',
|
|
name: 'image.png',
|
|
status: 'done',
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
},
|
|
{
|
|
uid: '-2',
|
|
name: 'image.png',
|
|
status: 'done',
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
},
|
|
{
|
|
uid: '-3',
|
|
name: 'image.png',
|
|
status: 'done',
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
},
|
|
{
|
|
uid: '-4',
|
|
name: 'image.png',
|
|
status: 'done',
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
},
|
|
{
|
|
uid: '-xxx',
|
|
percent: 50,
|
|
name: 'image.png',
|
|
status: 'uploading',
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
},
|
|
{
|
|
uid: '-5',
|
|
name: 'image.png',
|
|
status: 'error',
|
|
},
|
|
]);
|
|
|
|
const handleCancel = () => setPreviewVisible(false);
|
|
|
|
const handlePreview = async (file: UploadFile) => {
|
|
if (!file.url && !file.preview) {
|
|
file.preview = await getBase64(file.originFileObj as RcFile);
|
|
}
|
|
|
|
setPreviewImage(file.url || (file.preview as string));
|
|
setPreviewVisible(true);
|
|
setPreviewTitle(file.name || file.url!.substring(file.url!.lastIndexOf('/') + 1));
|
|
};
|
|
|
|
const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>
|
|
setFileList(newFileList);
|
|
|
|
const uploadButton = (
|
|
<div>
|
|
<PlusOutlined />
|
|
<div style={{ marginTop: 8 }}>Upload</div>
|
|
</div>
|
|
);
|
|
return (
|
|
<>
|
|
<Upload
|
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
|
listType="picture-card"
|
|
fileList={fileList}
|
|
onPreview={handlePreview}
|
|
onChange={handleChange}
|
|
>
|
|
{fileList.length >= 8 ? null : uploadButton}
|
|
</Upload>
|
|
<Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
|
|
<img alt="example" style={{ width: '100%' }} src={previewImage} />
|
|
</Modal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|
|
```
|