import React,{Component} from 'react'; import {Icon, Spin, Upload} from 'antd'; import './index.less'; import Viewer from 'viewerjs'; import 'viewerjs/dist/viewer.css'; import PropTypes from 'prop-types'; // const url1 = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601012352754&di=d33308119328f5ed987bd90031f98cfa&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg'; // const url2 = 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1601001245&di=60b5e1a42beb791524b46d7e3677f1f4&src=http://a2.att.hudong.com/13/86/01300001285722131043860050752.jpg'; const uploadButton = (
点击上传
); class ImgList extends Component{ constructor(props) { super(props); this.state={ seeMore: false, gallery: null, loading: true, imgLoadNum: 0, } this.imgLoading = this.imgLoading.bind(this); this.setTimeOutObj = null; } componentDidMount() { this.setTimeOutObj = setTimeout(()=>{ this.setState({ gallery: new Viewer(document.getElementById(this.props.domId)) },()=>{ this.setState({ loading: false }) }) },10000) } imgLoading(){ if(Object.keys(this.props.uploadConfig).length !== 0){ this.setTimeOutObj && clearTimeout(this.setTimeOutObj); }else{ let num = this.state.imgLoadNum + 1; if(num >= this.props.fileList.length){ this.state.gallery && this.state.gallery.destroy(); this.setState({ gallery: new Viewer(document.getElementById(this.props.domId)) },()=>{ this.setTimeOutObj && clearTimeout(this.setTimeOutObj); this.setState({ loading: false }) }) } this.setState({ imgLoadNum: num }) } } componentWillUnmount() { this.setTimeOutObj && clearTimeout(this.setTimeOutObj); } render() { const {fileList} = this.props; if(!fileList || !Array.isArray(fileList)){ return null; } return (
{ v.index = i; // v.url = i%2 ? url1 : url2; return v }) ) : ( this.state.seeMore? fileList.map((v,i)=>{ v.index = i; // v.url = i%2 ? url1 : url2; return v }) : fileList.map((v,i)=>{ v.index = i; // v.url = i%2 ? url1 : url2; return v }).slice(0,10) ) } onPreview={(file) => { if(Object.keys(this.props.uploadConfig).length !== 0){ //TODO 上传组件,查看图片临时解决方法,无法查看下一张 let image = new Image(); image.src = file.url || file.thumbUrl; let viewer = new Viewer(image, { hidden: function () { viewer.destroy(); }, }); viewer.show(); }else{ this.state.gallery.view(file.index).show(); } }} onChange={(infor)=>{ this.state.gallery && this.state.gallery.destroy(); this.props.onChange(infor) }} > {Object.keys(this.props.uploadConfig).length === 0 ? "" : uploadButton}
{fileList.length > 10 && Object.keys(this.props.uploadConfig).length === 0 ?
{this.setState({seeMore:!this.state.seeMore})}}> {this.state.seeMore ? '收起' : '查看更多'}
:
}
) } } ImgList.propTypes = { domId : PropTypes.string, //如果一个界面有多个该组件,需要传入自定义id名称,用于图片列表显示 fileList: PropTypes.array.isRequired, //图片文件列表 uploadConfig: PropTypes.object, //上传图片配置参数(需要上传图片时需要,存在与否,用于区分是否为上传或者为查看) onChange: PropTypes.func, //选择图片 } ImgList.defaultProps = { domId: 'images', fileList: [], uploadConfig: {}, onChange:()=>{} } export default ImgList;