import React,{Component} from 'react'; import {Icon, message, Spin, Upload,Progress} 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, uploadLoading: false, uploadsuccessNum: 0, percent: 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 }) } } beforeUpload(file) { const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'; if (!isJPG) { message.error('只能上传图片文件!'); } const isLt2M = file.size / 1024 / 1024 < 10; if (!isLt2M) { message.error('图片大小不能超过 10MB!'); } return isJPG && isLt2M; } 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(); } }} beforeUpload={this.beforeUpload} onChange={(infor)=>{ if(infor.file.status){ this.state.gallery && this.state.gallery.destroy(); this.props.onChange(infor); //----------------------------- if(infor.file && infor.file.status !== 'removed'){ let arr = infor.fileList.filter((v)=>{return isNaN(parseInt(v.uid))}); if(infor.event && infor.event.percent === 100){ this.setState({ uploadsuccessNum: this.state.uploadsuccessNum + 1, percent: (this.state.uploadsuccessNum + 1) / arr.length }) }else{ this.setState({ uploadLoading: true, }) } if(this.state.uploadsuccessNum === arr.length){ this.setState({ uploadLoading: false, },()=>{ this.setState({ percent: 0, }) }) } }else{ let arr = infor.fileList.filter((v)=>{return isNaN(parseInt(v.uid))}); this.setState({ uploadsuccessNum: arr.length, }) } //----------------------------------- if(infor.file && infor.file.status === 'error'){ message.error('图片上传失败,请重新上传!'); } } }} > {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 ? '收起' : '查看更多'}
:
} {this.state.uploadLoading ?
图片上传中...
:
}
) } } 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;