picture.jsx 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  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. console.log(info)
  23. let fileList = info.fileList;
  24. this.setState({ fileList });
  25. this.props.fileList(fileList);
  26. },
  27. componentWillReceiveProps(nextProps) {
  28. this.state.fileList = nextProps.pictureUrl;
  29. },
  30. render() {
  31. const { previewVisible, previewImage, fileList } = this.state;
  32. const uploadButton = (
  33. <div>
  34. <Icon type="plus" />
  35. <div className="ant-upload-text">点击上传</div>
  36. </div>
  37. );
  38. return (
  39. <div className="clearfix">
  40. <ImgList
  41. domId={this.props.domId}
  42. uploadConfig={{
  43. action:globalConfig.context + this.props.data.url,
  44. data:{ 'sign': this.props.data.sign },
  45. listType:"picture-card",
  46. multiple:true,
  47. }}
  48. onChange={(infor)=>{
  49. this.handleChange(infor)
  50. }}
  51. fileList={fileList}
  52. />
  53. {/*<Upload*/}
  54. {/* action={globalConfig.context + this.props.data.url}*/}
  55. {/* data={{ 'sign': this.props.data.sign }}*/}
  56. {/* listType="picture-card"*/}
  57. {/* fileList={fileList}*/}
  58. {/* multiple={true}*/}
  59. {/* onPreview={this.handlePreview}*/}
  60. {/* onChange={this.handleChange} >*/}
  61. {/* {uploadButton}*/}
  62. {/*</Upload>*/}
  63. {/*<Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>*/}
  64. {/* <img alt="example" style={{ width: '100%' }} src={previewImage} />*/}
  65. {/*</Modal>*/}
  66. </div>
  67. );
  68. }
  69. });
  70. export default PicturesWall;