mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
24a86df257
* style: fix Upload picture-card button style close https://github.com/ant-design/ant-design/issues/26317 close #23339 * style: tweak Upload list animation close #22386 * fix snapshot change * docs: update Upload demos * add test case * update form demo * fix test case
124 lines
3.1 KiB
Markdown
124 lines
3.1 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.
|
|
|
|
```jsx
|
|
import { Upload, Modal } from 'antd';
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
|
|
function getBase64(file) {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
reader.onload = () => resolve(reader.result);
|
|
reader.onerror = error => reject(error);
|
|
});
|
|
}
|
|
|
|
class PicturesWall extends React.Component {
|
|
state = {
|
|
previewVisible: false,
|
|
previewImage: '',
|
|
previewTitle: '',
|
|
fileList: [
|
|
{
|
|
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',
|
|
},
|
|
],
|
|
};
|
|
|
|
handleCancel = () => this.setState({ previewVisible: false });
|
|
|
|
handlePreview = async file => {
|
|
if (!file.url && !file.preview) {
|
|
file.preview = await getBase64(file.originFileObj);
|
|
}
|
|
|
|
this.setState({
|
|
previewImage: file.url || file.preview,
|
|
previewVisible: true,
|
|
previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
|
|
});
|
|
};
|
|
|
|
handleChange = ({ fileList }) => this.setState({ fileList });
|
|
|
|
render() {
|
|
const { previewVisible, previewImage, fileList, previewTitle } = this.state;
|
|
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={this.handlePreview}
|
|
onChange={this.handleChange}
|
|
>
|
|
{fileList.length >= 8 ? null : uploadButton}
|
|
</Upload>
|
|
<Modal
|
|
visible={previewVisible}
|
|
title={previewTitle}
|
|
footer={null}
|
|
onCancel={this.handleCancel}
|
|
>
|
|
<img alt="example" style={{ width: '100%' }} src={previewImage} />
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
ReactDOM.render(<PicturesWall />, mountNode);
|
|
```
|