picture.jsx 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. import React from 'react';
  2. import {Icon,Upload,Modal} from 'antd';
  3. const PicturesWall = React.createClass({
  4. getInitialState() {
  5. return {
  6. previewVisible: false,
  7. previewImage: '',
  8. fileList: [],
  9. }
  10. },
  11. handleCancel() {
  12. this.setState({ previewVisible: false })
  13. },
  14. handlePreview(file) {
  15. this.setState({
  16. previewImage: file.url || file.thumbUrl,
  17. previewVisible: true,
  18. });
  19. },
  20. handleChange(info) {
  21. let fileList = info.fileList;
  22. this.setState({ fileList });
  23. this.props.fileList(fileList);
  24. },
  25. componentWillReceiveProps(nextProps) {
  26. this.state.fileList = nextProps.pictureUrl;
  27. },
  28. render() {
  29. const { previewVisible, previewImage, fileList } = this.state;
  30. const uploadButton = (
  31. <div>
  32. <Icon type="plus" />
  33. <div className="ant-upload-text">点击上传</div>
  34. </div>
  35. );
  36. return (
  37. <div className="clearfix">
  38. <Upload
  39. action={globalConfig.context + this.props.data.url}
  40. data={{ 'sign': this.props.data.sign }}
  41. listType="picture-card"
  42. fileList={fileList}
  43. onPreview={this.handlePreview}
  44. onChange={this.handleChange} >
  45. {fileList.length >= this.props.data.number ? null : uploadButton}
  46. </Upload>
  47. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
  48. <img alt="example" style={{ width: '100%' }} src={previewImage} />
  49. </Modal>
  50. </div>
  51. );
  52. }
  53. });
  54. export default PicturesWall;