kede-client/js/component/common/imgList/index.js

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.split('/');
        if (isJPG[0] !== 'image') {
            message.error('只能上传图片文件!');
            return false;
        }
        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}
                            accept="image/*"
                            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;