|
@@ -1,5 +1,5 @@
|
|
|
import React,{Component} from 'react';
|
|
|
-import {Icon, message, Spin, Upload,Progress} from 'antd';
|
|
|
+import {Icon, Spin, Upload,message} from 'antd';
|
|
|
import './index.less';
|
|
|
import Viewer from 'viewerjs';
|
|
|
import 'viewerjs/dist/viewer.css';
|
|
@@ -24,9 +24,8 @@ class ImgList extends Component{
|
|
|
loading: true,
|
|
|
imgLoadNum: 0,
|
|
|
|
|
|
- uploadLoading: false,
|
|
|
- uploadsuccessNum: 0,
|
|
|
- percent: 0,
|
|
|
+ // fileListSize: 0,
|
|
|
+ // doneFileSize: 0,
|
|
|
}
|
|
|
this.imgLoading = this.imgLoading.bind(this);
|
|
|
this.setTimeOutObj = null;
|
|
@@ -66,22 +65,24 @@ class ImgList extends Component{
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ componentWillUnmount() {
|
|
|
+ this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
|
|
|
+ }
|
|
|
+
|
|
|
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;
|
|
|
}
|
|
|
return isJPG && isLt2M;
|
|
|
}
|
|
|
|
|
|
- componentWillUnmount() {
|
|
|
- this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
|
|
|
- }
|
|
|
-
|
|
|
render() {
|
|
|
const {fileList} = this.props;
|
|
|
if(!fileList || !Array.isArray(fileList)){
|
|
@@ -117,6 +118,7 @@ class ImgList extends Component{
|
|
|
}).slice(0,10)
|
|
|
)
|
|
|
}
|
|
|
+ beforeUpload={this.beforeUpload}
|
|
|
onPreview={(file) => {
|
|
|
if(Object.keys(this.props.uploadConfig).length !== 0){
|
|
|
//TODO 上传组件,查看图片临时解决方法,无法查看下一张
|
|
@@ -133,50 +135,27 @@ class ImgList extends Component{
|
|
|
this.state.gallery.view(file.index).show();
|
|
|
}
|
|
|
}}
|
|
|
- beforeUpload={this.beforeUpload}
|
|
|
onChange={(infor)=>{
|
|
|
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({
|
|
|
- percent: 1,
|
|
|
- },()=>{
|
|
|
- setTimeout(()=>{
|
|
|
- this.setState({
|
|
|
- uploadLoading: false,
|
|
|
- },()=>{
|
|
|
- this.setState({
|
|
|
- percent: 0,
|
|
|
- })
|
|
|
- })
|
|
|
- },1500)
|
|
|
- })
|
|
|
- }
|
|
|
- }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('图片上传失败,请重新上传!');
|
|
|
- }
|
|
|
+ this.props.onChange(infor)
|
|
|
+ }
|
|
|
+ if(infor.file && infor.file.status === 'error'){
|
|
|
+ message.error('图片上传失败,请重新上传!');
|
|
|
}
|
|
|
+ // 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}
|
|
@@ -197,22 +176,6 @@ 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>
|
|
|
)
|
|
|
}
|