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. console.log(info);
  29. let fileList = info.fileList;
  30. this.setState({
  31. fileList,
  32. });
  33. this.props.fileList(fileList);
  34. }
  35. componentWillReceiveProps(nextProps) {
  36. this.state.fileList = nextProps.pictureUrl;
  37. this.state.pojectApplicationUrl = undefined;
  38. }
  39. render() {
  40. const { previewVisible, previewImage, fileList } = this.state;
  41. const uploadButton = (
  42. <div>
  43. <Icon type="plus" />
  44. <div className="ant-upload-text">点击上传</div>
  45. </div>
  46. );
  47. return (
  48. <div style={{ display: "inline-block" }}>
  49. <Upload
  50. action={globalConfig.context + this.props.url}
  51. data={{ sign: this.props.sign }}
  52. listType="picture-card"
  53. fileList={fileList}
  54. onPreview={this.handlePreview}
  55. onChange={this.handleChange}
  56. >
  57. {fileList.length >= 1 ? null : uploadButton}
  58. </Upload>
  59. <Modal
  60. maskClosable={false}
  61. visible={previewVisible}
  62. footer={null}
  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;