| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178 | 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 = (    <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,            // fileListSize: 0,            // doneFileSize: 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 (            <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;                                            // 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)                                // this.setState({                                //     fileListSize: infor.fileList.length                                // })                                // if(infor.file && infor.file.status === 'done'){                                //     let num = this.state.doneFileSize + 1;                                //     if(num >= infor.fileList.length){                                //         console.log('所有都上传成功')                                //     }                                //     this.setState({                                //         doneFileSize: num                                //     })                                // }                                // console.log(infor.event)                            }}                        >                            {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>            </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;
 |