浏览代码

图片组件添加 上传中遮罩层

mentoswzq 4 年之前
父节点
当前提交
1f054f55fc
共有 3 个文件被更改,包括 70 次插入20 次删除
  1. 69 18
      js/component/common/imgList/index.js
  2. 0 1
      js/component/manageCenter/publicComponent/picture.jsx
  3. 1 1
      package.json

+ 69 - 18
js/component/common/imgList/index.js

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

+ 0 - 1
js/component/manageCenter/publicComponent/picture.jsx

@@ -21,7 +21,6 @@ const PicturesWall = React.createClass({
         });
     },
     handleChange(info) {
-        console.log(info)
         let fileList = info.fileList;
         this.setState({ fileList });
         this.props.fileList(fileList);

+ 1 - 1
package.json

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