|
@@ -1,5 +1,5 @@
|
|
import React,{Component} from 'react';
|
|
import React,{Component} from 'react';
|
|
-import {Icon, Spin, Upload,message} from 'antd';
|
|
|
|
|
|
+import {Icon, message, Spin, Upload,Progress} from 'antd';
|
|
import './index.less';
|
|
import './index.less';
|
|
import Viewer from 'viewerjs';
|
|
import Viewer from 'viewerjs';
|
|
import 'viewerjs/dist/viewer.css';
|
|
import 'viewerjs/dist/viewer.css';
|
|
@@ -24,10 +24,14 @@ class ImgList extends Component{
|
|
loading: true,
|
|
loading: true,
|
|
imgLoadNum: 0,
|
|
imgLoadNum: 0,
|
|
|
|
|
|
- // fileListSize: 0,
|
|
|
|
- // doneFileSize: 0,
|
|
|
|
|
|
+ uploadLoading: false,
|
|
|
|
+ percent: 0,
|
|
|
|
+
|
|
|
|
+ newUploadArr: [],
|
|
|
|
+ newUploadInforArr: {},
|
|
}
|
|
}
|
|
this.imgLoading = this.imgLoading.bind(this);
|
|
this.imgLoading = this.imgLoading.bind(this);
|
|
|
|
+ this.beforeUpload = this.beforeUpload.bind(this);
|
|
this.setTimeOutObj = null;
|
|
this.setTimeOutObj = null;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -65,24 +69,29 @@ class ImgList extends Component{
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- componentWillUnmount() {
|
|
|
|
- this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
beforeUpload(file) {
|
|
beforeUpload(file) {
|
|
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
|
|
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
|
|
if (!isJPG) {
|
|
if (!isJPG) {
|
|
message.error('只能上传图片文件!');
|
|
message.error('只能上传图片文件!');
|
|
- return isJPG;
|
|
|
|
}
|
|
}
|
|
const isLt2M = file.size / 1024 / 1024 < 10;
|
|
const isLt2M = file.size / 1024 / 1024 < 10;
|
|
if (!isLt2M) {
|
|
if (!isLt2M) {
|
|
message.error('图片大小不能超过 10MB!');
|
|
message.error('图片大小不能超过 10MB!');
|
|
- return isLt2M;
|
|
|
|
|
|
+ }
|
|
|
|
+ if(isJPG && isLt2M){
|
|
|
|
+ //用于计算当次选择的图片数量
|
|
|
|
+ this.state.newUploadArr.push(file)
|
|
|
|
+ this.setState({
|
|
|
|
+ newUploadArr:this.state.newUploadArr
|
|
|
|
+ })
|
|
}
|
|
}
|
|
return isJPG && isLt2M;
|
|
return isJPG && isLt2M;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ componentWillUnmount() {
|
|
|
|
+ this.setTimeOutObj && clearTimeout(this.setTimeOutObj);
|
|
|
|
+ }
|
|
|
|
+
|
|
render() {
|
|
render() {
|
|
const {fileList} = this.props;
|
|
const {fileList} = this.props;
|
|
if(!fileList || !Array.isArray(fileList)){
|
|
if(!fileList || !Array.isArray(fileList)){
|
|
@@ -118,7 +127,6 @@ class ImgList extends Component{
|
|
}).slice(0,10)
|
|
}).slice(0,10)
|
|
)
|
|
)
|
|
}
|
|
}
|
|
- beforeUpload={this.beforeUpload}
|
|
|
|
onPreview={(file) => {
|
|
onPreview={(file) => {
|
|
if(Object.keys(this.props.uploadConfig).length !== 0){
|
|
if(Object.keys(this.props.uploadConfig).length !== 0){
|
|
//TODO 上传组件,查看图片临时解决方法,无法查看下一张
|
|
//TODO 上传组件,查看图片临时解决方法,无法查看下一张
|
|
@@ -135,27 +143,60 @@ class ImgList extends Component{
|
|
this.state.gallery.view(file.index).show();
|
|
this.state.gallery.view(file.index).show();
|
|
}
|
|
}
|
|
}}
|
|
}}
|
|
|
|
+ beforeUpload={this.beforeUpload}
|
|
onChange={(infor)=>{
|
|
onChange={(infor)=>{
|
|
if(infor.file.status){
|
|
if(infor.file.status){
|
|
|
|
+ let newUploadNum = this.state.newUploadArr.length
|
|
this.state.gallery && this.state.gallery.destroy();
|
|
this.state.gallery && this.state.gallery.destroy();
|
|
- this.props.onChange(infor)
|
|
|
|
- }
|
|
|
|
- if(infor.file && infor.file.status === 'error'){
|
|
|
|
- message.error('图片上传失败,请重新上传!');
|
|
|
|
|
|
+ this.props.onChange(infor);
|
|
|
|
+ if(infor.file && infor.file.status === 'error'){
|
|
|
|
+ message.error('图片上传失败,请重新上传!');
|
|
|
|
+ }
|
|
|
|
+ //用于控制进度条
|
|
|
|
+ if(infor.file && infor.file.status !== 'removed' && Object.keys(infor.event).length > 0){
|
|
|
|
+ let percent = 0;
|
|
|
|
+ console.log(infor.event,'infor.event')
|
|
|
|
+ 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,
|
|
|
|
+ })
|
|
|
|
+ }else{
|
|
|
|
+ this.setState({
|
|
|
|
+ percent: 1,
|
|
|
|
+ },()=>{
|
|
|
|
+ setTimeout(()=>{
|
|
|
|
+ this.setState({
|
|
|
|
+ uploadLoading: false,
|
|
|
|
+ },()=>{
|
|
|
|
+ this.setState({
|
|
|
|
+ percent: 0,
|
|
|
|
+ newUploadArr: [],
|
|
|
|
+ newUploadInforArr: {}
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ },1500)
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }else{
|
|
|
|
+ this.setState({
|
|
|
|
+ percent: 0,
|
|
|
|
+ newUploadArr: [],
|
|
|
|
+ newUploadInforArr: {}
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ //-----------------------------------
|
|
}
|
|
}
|
|
- // 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}
|
|
{Object.keys(this.props.uploadConfig).length === 0 ? "" : uploadButton}
|
|
@@ -176,6 +217,22 @@ class ImgList extends Component{
|
|
))
|
|
))
|
|
}
|
|
}
|
|
</ul>
|
|
</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>
|
|
</div>
|
|
)
|
|
)
|
|
}
|
|
}
|