test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 20:19:44 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

update preview demo

Browse Source
This commit is contained in:
zombiej 2019-05-24 16:36:09 +08:00
parent 5ab2783ff0
commit a9b5acfba9
1 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/upload/demo/picture-card.md
View File

@ -16,6 +16,15 @@ After users upload picture, the thumbnail will be shown in list. The upload butt
```jsx
import { Upload, Icon, Modal } from 'antd';
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,
@ -32,9 +41,13 @@ class PicturesWall extends React.Component {
handleCancel = () => this.setState({ previewVisible: false });
handlePreview = file => {
handlePreview = async file => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
this.setState({
previewImage: file.url || file.thumbUrl,
previewImage: file.url || file.preview,
previewVisible: true,
});
};