Browse Source

图片组件优化进度条

mentoswzq 4 years ago
parent
commit
b5a68337db
2 changed files with 85 additions and 28 deletions
  1. 84 27
      js/component/common/imgList/index.js
  2. 1 1
      package.json

+ 84 - 27
js/component/common/imgList/index.js

@@ -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>
         )
         )
     }
     }

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
 {
   "name": "afanti",
   "name": "afanti",
-  "version": "1.1.55",
+  "version": "1.1.56",
   "description": "",
   "description": "",
   "main": "index.js",
   "main": "index.js",
   "scripts": {
   "scripts": {