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 = (
点击上传
); 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 isLt2M = file.size / 1024 / 1024 < 10; if (!isLt2M) { message.error('文件大小不能超过 10MB!'); return isLt2M; } if (this.props.accept) { if (isLt2M) { this.state.newUploadArr.push(file) this.setState({ newUploadArr: this.state.newUploadArr }) } return isLt2M; } else { const isJPG = file.type.split('/'); if (isJPG[0] !== 'image') { message.error('只能上传图片文件!'); return false; } 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; 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}
{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;