cropBlock.jsx 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import React, {
  2. Component
  3. } from 'react';
  4. import CropBox from './cropBox.jsx';
  5. import './crop.css';
  6. class CropBlock extends Component {
  7. constructor(props) {
  8. super(props);
  9. this.state = {
  10. urlArr: this.props.imgArr ? this.props.imgArr : [],
  11. number: this.props.number ? this.props.number : '',
  12. uploadData: this.props.uploadData ? this.props.uploadData : {},
  13. aspectRatio: this.props.aspectRatio ? this.props.aspectRatio : '',
  14. url: this.props.url ? this.props.url : '',
  15. close: true,
  16. }
  17. this.getUrl = this.getUrl.bind(this);
  18. this.addImg = this.addImg.bind(this);
  19. this.delImg = this.delImg.bind(this);
  20. this.getAllImg = this.getAllImg.bind(this);
  21. }
  22. getUrl(url) {
  23. let urlArr2 = this.state.urlArr;
  24. urlArr2.push(url);
  25. this.setState({
  26. urlArr: urlArr2,
  27. close: true
  28. })
  29. this.getAllImg(urlArr2);
  30. }
  31. addImg() {
  32. if(!this.state.number || (this.state.urlArr.length < this.state.number)) {
  33. this.setState({
  34. close: false
  35. })
  36. }
  37. else {
  38. alert("最多上传"+this.state.number+"张图片!");
  39. }
  40. }
  41. delImg(index) {
  42. if(window.confirm("你确定要删除改图片吗")) {
  43. let urlArr2 = this.state.urlArr;
  44. urlArr2.splice(index, 1);
  45. this.setState({
  46. urlArr: urlArr2,
  47. close: true
  48. })
  49. this.getAllImg(urlArr2);
  50. }
  51. }
  52. getAllImg(urlArr) {
  53. if(this.props.getAllImg) {
  54. this.props.getAllImg(urlArr);
  55. }
  56. }
  57. render() {
  58. console.log(this.state.urlArr)
  59. let imgList = this.state.urlArr.map((src, index) =>
  60. <div key = {index} className="crop-img-block">
  61. <img alt = "图片" className = "crop-img" title = "删除" src = {src} onClick = {this.delImg.bind(this, index)} />
  62. </div>
  63. )
  64. return (
  65. <div className = "crop-block">
  66. {imgList}
  67. <div className="crop-add-img" onClick = {this.addImg}>添加图片</div>
  68. <CropBox getUrl = {this.getUrl} uploadData = {this.state.uploadData} aspectRatio = {this.state.aspectRatio} url = {this.state.url} close = {this.state.close}/>
  69. </div>
  70. )
  71. }
  72. }
  73. export default CropBlock;
  74. /*
  75. //调用
  76. <Crop
  77. number = {5}
  78. aspectRatio = {1/1}
  79. url ={globalConfig.context + '/api/admin/banners/uploadPicture'}
  80. uploadData = {{sign: 'banners'}}
  81. urlArr = {[]}
  82. />
  83. */