|
@@ -1,5 +1,5 @@
|
|
|
import React,{Component} from 'react';
|
|
|
-import {Icon, Spin, Upload} from 'antd';
|
|
|
+import {Icon, message, Spin, Upload,Progress} from 'antd';
|
|
|
import './index.less';
|
|
|
import Viewer from 'viewerjs';
|
|
|
import 'viewerjs/dist/viewer.css';
|
|
@@ -24,8 +24,9 @@ class ImgList extends Component{
|
|
|
loading: true,
|
|
|
imgLoadNum: 0,
|
|
|
|
|
|
- // fileListSize: 0,
|
|
|
- // doneFileSize: 0,
|
|
|
+ uploadLoading: false,
|
|
|
+ uploadsuccessNum: 0,
|
|
|
+ percent: 0,
|
|
|
}
|
|
|
this.imgLoading = this.imgLoading.bind(this);
|
|
|
this.setTimeOutObj = null;
|
|
@@ -65,6 +66,18 @@ class ImgList extends Component{
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ 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!');
|
|
|
+ }
|
|
|
+ return isJPG && isLt2M;
|
|
|
+ }
|
|
|
+
|
|
|
componentWillUnmount() {
|
|
|
this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
|
|
|
}
|
|
@@ -120,22 +133,44 @@ class ImgList extends Component{
|
|
|
this.state.gallery.view(file.index).show();
|
|
|
}
|
|
|
}}
|
|
|
+ beforeUpload={this.beforeUpload}
|
|
|
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)
|
|
|
+ if(infor.file.status){
|
|
|
+ this.state.gallery && this.state.gallery.destroy();
|
|
|
+ this.props.onChange(infor);
|
|
|
+ //-----------------------------
|
|
|
+ if(infor.file && infor.file.status !== 'removed'){
|
|
|
+ let arr = infor.fileList.filter((v)=>{return isNaN(parseInt(v.uid))});
|
|
|
+ if(infor.event && infor.event.percent === 100){
|
|
|
+ this.setState({
|
|
|
+ uploadsuccessNum: this.state.uploadsuccessNum + 1,
|
|
|
+ percent: (this.state.uploadsuccessNum + 1) / arr.length
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.setState({
|
|
|
+ uploadLoading: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if(this.state.uploadsuccessNum === arr.length){
|
|
|
+ this.setState({
|
|
|
+ uploadLoading: false,
|
|
|
+ },()=>{
|
|
|
+ this.setState({
|
|
|
+ percent: 0,
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ let arr = infor.fileList.filter((v)=>{return isNaN(parseInt(v.uid))});
|
|
|
+ this.setState({
|
|
|
+ uploadsuccessNum: arr.length,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ //-----------------------------------
|
|
|
+ if(infor.file && infor.file.status === 'error'){
|
|
|
+ message.error('图片上传失败,请重新上传!');
|
|
|
+ }
|
|
|
+ }
|
|
|
}}
|
|
|
>
|
|
|
{Object.keys(this.props.uploadConfig).length === 0 ? "" : uploadButton}
|
|
@@ -156,6 +191,22 @@ class ImgList extends Component{
|
|
|
))
|
|
|
}
|
|
|
</ul>
|
|
|
+ {this.state.uploadLoading ? <div style={{
|
|
|
+ position:"fixed",
|
|
|
+ top: 0,
|
|
|
+ bottom: 0,
|
|
|
+ left: 0,
|
|
|
+ right: 0,
|
|
|
+ zIndex: 9999999999,
|
|
|
+ background: 'rgba(0,0,0,.8)',
|
|
|
+ display:"flex",
|
|
|
+ flexFlow:'column',
|
|
|
+ alignItems:'center',
|
|
|
+ justifyContent:'center',
|
|
|
+ }}>
|
|
|
+ <Progress style={{color:'#FFF'}} type="circle" status="active" percent={parseFloat(this.state.percent * 100).toFixed(0)} />
|
|
|
+ <div style={{color:'#FFF',paddingTop:'15px'}}>图片上传中...</div>
|
|
|
+ </div> : <div/>}
|
|
|
</div>
|
|
|
)
|
|
|
}
|