picturesWall.js 1.9 KB

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