picturesWall.js 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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={globalConfig.context + this.props.url}
  50. data={{ sign: this.props.sign }}
  51. listType="picture-card"
  52. fileList={fileList}
  53. onPreview={this.handlePreview}
  54. onChange={this.handleChange}
  55. >
  56. {fileList.length >= 18 ? null : uploadButton}
  57. </Upload>
  58. <Modal
  59. maskClosable={false}
  60. visible={previewVisible}
  61. footer={null}
  62. width={"50%"}
  63. onCancel={this.handleCancel}
  64. >
  65. <img alt="example" style={{ width: "100%" }} src={previewImage} />
  66. </Modal>
  67. </div>
  68. );
  69. }
  70. }
  71. export default PicturesWall;