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, percent: 0, newUploadArr: [], newUploadInforArr: {}, } this.imgLoading = this.imgLoading.bind(this); this.beforeUpload = this.beforeUpload.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!'); } if(isJPG && isLt2M){ //用于计算当次选择的图片数量 this.state.newUploadArr.push(file) this.setState({ newUploadArr:this.state.newUploadArr }) } 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){ let newUploadNum = this.state.newUploadArr.length this.state.gallery && this.state.gallery.destroy(); this.props.onChange(infor); if(infor.file && infor.file.status === 'error'){ message.error('图片上传失败,请重新上传!'); } //用于控制进度条 if(infor.file && infor.file.status !== 'removed' && Object.keys(infor.event).length > 0){ let percent = 0; console.log(infor.event,'infor.event') this.state.newUploadInforArr[infor.file.uid] = infor.event.percent; this.setState({ newUploadInforArr:this.state.newUploadInforArr }) for(let i of Object.values(this.state.newUploadInforArr)){ percent+= i } let percentNum = percent/newUploadNum/100; this.setState({ percent:percentNum }) if(percentNum < 1) { this.setState({ uploadLoading: true, }) }else{ this.setState({ percent: 1, },()=>{ setTimeout(()=>{ this.setState({ uploadLoading: false, },()=>{ this.setState({ percent: 0, newUploadArr: [], newUploadInforArr: {} }) }) },1500) }) } }else{ this.setState({ percent: 0, newUploadArr: [], newUploadInforArr: {} }) } //----------------------------------- } }} > {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;