| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 | 
import React from 'react';import {Icon,Upload,Modal} from 'antd';const PicturesWall = React.createClass({    getInitialState() {        return {            previewVisible: false,            previewImage: '',            fileList: [],        }    },    handleCancel() {        this.setState({ previewVisible: false })    },    handlePreview(file) {        this.setState({            previewImage: file.url || file.thumbUrl,            previewVisible: true,        });    },    handleChange(info) {        let fileList = info.fileList;        this.setState({ fileList });        this.props.fileList(fileList);    },    componentWillReceiveProps(nextProps) {        this.state.fileList = nextProps.pictureUrl;    },    render() {        const { previewVisible, previewImage, fileList } = this.state;        const uploadButton = (            <div>                <Icon type="plus" />                <div className="ant-upload-text">点击上传</div>            </div>        );        return (            <div className="clearfix">                <Upload                    action={globalConfig.context + this.props.data.url}                    data={{ 'sign': this.props.data.sign }}                    listType="picture-card"                    fileList={fileList}                    onPreview={this.handlePreview}                    onChange={this.handleChange} >                    {fileList.length >= this.props.data.number ? null : uploadButton}                </Upload>                <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>                    <img alt="example" style={{ width: '100%' }} src={previewImage} />                </Modal>            </div>        );    }}); export default PicturesWall;
 |