picture.jsx 1.7 KB

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