picture.jsx 2.4 KB

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