mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-20 12:28:10 +08:00
84 lines
2.0 KiB
Markdown
84 lines
2.0 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, Icon, Modal } from 'antd';
|
|
|
|
class PicturesWall extends React.Component {
|
|
state = {
|
|
previewVisible: false,
|
|
previewImage: '',
|
|
fileList: [{
|
|
uid: -1,
|
|
name: 'xxx.png',
|
|
status: 'done',
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
}],
|
|
};
|
|
|
|
handleCancel = () => this.setState({ previewVisible: false })
|
|
|
|
handlePreview = (file) => {
|
|
this.setState({
|
|
previewImage: file.url || file.thumbUrl,
|
|
previewVisible: true,
|
|
});
|
|
}
|
|
|
|
handleChange = ({ fileList }) => this.setState({ fileList })
|
|
|
|
render() {
|
|
const { previewVisible, previewImage, fileList } = this.state;
|
|
const uploadButton = (
|
|
<div>
|
|
<Icon type="plus" />
|
|
<div className="ant-upload-text">Upload</div>
|
|
</div>
|
|
);
|
|
return (
|
|
<div className="clearfix">
|
|
<Upload
|
|
action="//jsonplaceholder.typicode.com/posts/"
|
|
listType="picture-card"
|
|
fileList={fileList}
|
|
onPreview={this.handlePreview}
|
|
onChange={this.handleChange}
|
|
>
|
|
{fileList.length >= 3 ? null : uploadButton}
|
|
</Upload>
|
|
<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
|
|
<img alt="example" style={{ width: '100%' }} src={previewImage} />
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
ReactDOM.render(<PicturesWall />, mountNode);
|
|
````
|
|
|
|
````css
|
|
/* you can make up upload button and sample style by using stylesheets */
|
|
.ant-upload-select-picture-card i {
|
|
font-size: 32px;
|
|
color: #999;
|
|
}
|
|
|
|
.ant-upload-select-picture-card .ant-upload-text {
|
|
margin-top: 8px;
|
|
color: #666;
|
|
}
|
|
````
|