React Ant Design UI 图片上传组件 代码片段

用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。

 

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 = (
      

        
        
Upload
      
    );
    return (
      

        
          {fileList.length >= 3 ? null : uploadButton}
        
        
          
        
      
    );
  }
}

ReactDOM.render(, mountNode);