| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243 | 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 uploadButton = (    <div>        <Icon type="plus" />        <div className="ant-upload-text">点击上传</div>    </div>);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('只能上传图片文件!');            return isJPG;        }        const isLt2M = file.size / 1024 / 1024 < 10;        if (!isLt2M) {            message.error('图片大小不能超过 10MB!');            return isLt2M;        }        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 (            <div className='ImgListComponent'>                <div className='ImgList'>                    <Spin spinning={Object.keys(this.props.uploadConfig).length !== 0 ? false : (fileList.length === 0 ? false : this.state.loading)} tip="图片加载中...">                        <Upload                            {...this.props.uploadConfig}                            className={Object.keys(this.props.uploadConfig).length !== 0 ? "" : "demandDetailShow-upload" }                            listType="picture-card"                            fileList={                                Object.keys(this.props.uploadConfig).length !== 0 ?                                    (                                        fileList.map((v,i)=>{                                            v.index = i;                                            return v                                        })                                    ) : (                                        this.state.seeMore?                                            fileList.map((v,i)=>{                                                v.index = i;                                                return v                                            }) :                                            fileList.map((v,i)=>{                                                v.index = i;                                                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' && infor.event){                                        let percent = 0;                                        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,                                            })                                        }                                        if(percentNum >= 1){                                            this.setState({                                                percent: 1,                                            },()=>{                                                setTimeout(()=>{                                                    this.setState({                                                        uploadLoading: false,                                                    },()=>{                                                        this.setState({                                                            percent: 0,                                                            newUploadArr: [],                                                            newUploadInforArr: {}                                                        })                                                    })                                                },1500)                                            })                                        }                                    }else if(infor.file && infor.file.status === 'removed'){                                        this.setState({                                            percent: 0,                                            newUploadArr: [],                                            newUploadInforArr: {}                                        })                                    }                                }                            }}                        >                            {Object.keys(this.props.uploadConfig).length === 0 ? "" : uploadButton}                        </Upload>                    </Spin>                </div>                {fileList.length > 10 && Object.keys(this.props.uploadConfig).length === 0 ? <div className='seeMore' onClick={()=>{this.setState({seeMore:!this.state.seeMore})}}>                    {this.state.seeMore ? '收起' : '查看更多'}                </div> : <div/>}                <ul id={this.props.domId} style={{display:'none',zIndex:-1,}}>                    {                        fileList.map((value,index)=>(                            <li key={index}>                                <img src={value.url || value.thumbUrl} onLoad={()=>{                                    this.imgLoading();                                }}/>                            </li>                        ))                    }                </ul>                {this.state.uploadLoading ? <div className='mask'>                    <Progress                        className='progress'                        type="circle"                        status="active"                        percent={parseFloat(this.state.percent * 100).toFixed(0)}                    />                    <div className='promptText'>图片上传中...</div>                </div> : <div/>}            </div>        )    }}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;
 |