12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- import React, {
- Component
- } from 'react';
- import CropBox from './cropBox.jsx';
- import './crop.css';
- class CropBlock extends Component {
- constructor(props) {
- super(props);
- this.state = {
- urlArr: this.props.imgArr ? this.props.imgArr : [],
- number: this.props.number ? this.props.number : '',
- uploadData: this.props.uploadData ? this.props.uploadData : {},
- aspectRatio: this.props.aspectRatio ? this.props.aspectRatio : '',
- url: this.props.url ? this.props.url : '',
- close: true,
- }
- this.getUrl = this.getUrl.bind(this);
- this.addImg = this.addImg.bind(this);
- this.delImg = this.delImg.bind(this);
- this.getAllImg = this.getAllImg.bind(this);
- }
- getUrl(url) {
- let urlArr2 = this.state.urlArr;
- urlArr2.push(url);
- this.setState({
- urlArr: urlArr2,
- close: true
- })
- this.getAllImg(urlArr2);
- }
- addImg() {
- if(!this.state.number || (this.state.urlArr.length < this.state.number)) {
- this.setState({
- close: false
- })
- }
- else {
- alert("最多上传"+this.state.number+"张图片!");
- }
- }
- delImg(index) {
- if(window.confirm("你确定要删除改图片吗")) {
- let urlArr2 = this.state.urlArr;
- urlArr2.splice(index, 1);
- this.setState({
- urlArr: urlArr2,
- close: true
- })
- this.getAllImg(urlArr2);
- }
- }
- getAllImg(urlArr) {
- if(this.props.getAllImg) {
- this.props.getAllImg(urlArr);
- }
- }
- render() {
- console.log(this.state.urlArr)
- let imgList = this.state.urlArr.map((src, index) =>
- <div key = {index} className="crop-img-block">
- <img alt = "图片" className = "crop-img" title = "删除" src = {src} onClick = {this.delImg.bind(this, index)} />
- </div>
- )
- return (
- <div className = "crop-block">
- {imgList}
- <div className="crop-add-img" onClick = {this.addImg}>添加图片</div>
- <CropBox getUrl = {this.getUrl} uploadData = {this.state.uploadData} aspectRatio = {this.state.aspectRatio} url = {this.state.url} close = {this.state.close}/>
- </div>
- )
- }
- }
- export default CropBlock;
- /*
- //调用
- <Crop
- number = {5}
- aspectRatio = {1/1}
- url ={globalConfig.context + '/api/admin/banners/uploadPicture'}
- uploadData = {{sign: 'banners'}}
- urlArr = {[]}
- />
- */
|