picture.jsx 1.8 KB

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