提交代码

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>examcloud-web-photo-upload</title>
+    <title>photo-upload</title>
     <script type="text/javascript">
     	if(typeof(require) != "undefined"){
     		window.nodeRequire = require;

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app" class="body_bg">
+  <div id="app">
     <router-view/>
   </div>
 </template>

src/assets/css/common.css

@@ -1,6 +1,7 @@
 html,
 body {
   min-height: 100%;
+  background: url(../images/bg.jpg);
 }
 .layout-boxed html,
 .layout-boxed body {

src/views/index.vue

@@ -6,6 +6,7 @@
 		height: 80px;
 		padding: 0 30px;
 		line-height: 80px;
+		text-align: left;
 	}
 	
 	#import-header>img {
@@ -108,43 +109,52 @@
 	    color: #004974;
 	    text-decoration: none;
     }
+    #progressDiv{
+    	height: 50px;
+    	line-height: 50px;
+    	margin:auto;
+    	font-size:20px;
+    	border:1px solid gainsboro;
+    	cursor:default;
+    }
 </style>
 <template>
 	<div style='height: 100%;'>
 		<div id='import-header'>
 			<img src='../assets/images/nav_images.png' alt=''>照片批量上传工具
-			<button id='exit-btn' @click='logout'></button>
+			<button id='exit-btn' @click='logout' title="退出"></button>
 		</div>
 		<div id='import-body'>
 			<div id='import-div'>
 	            <a href='javascript:;' class='file'>
-	            	<!--webkitdirectory-->
-	            	<input id='photos' :disabled='uploadDisabled' multiple="true" title=' ' name='files' type='file'  v-on:change='importPhotos'/>
+	            	<!-- webkitdirectory-->
+	            	<input id='photos' :disabled='uploadDisabled'  multiple="true" title=' ' name='files' type='file'  v-on:change='importPhotos'/>
 	            	<button  id='import-btn'>
-		                {{btnText}}
+		                	上传照片
 		            </button>
 	            </a>
-	            <button class='form-control' style='width: 40%;margin:auto;font-size:20px;'>
-	                <span>成功:{{successNum}}/{{allNum}}</span>
-	                <span>失败:{{errorNum}}/{{allNum}}</span>
-	                <!--<span>处理进度:{{completeProportion}}</span>-->
-	            </button>
+	            <div id='progressDiv'>
+	                <span>
+	                	成功:
+	                	<span style="color:green;">{{successNum}}</span>/{{allNum}}
+	                </span>
+	                <span>
+	                	失败:<span style="color:red;">{{errorNum}}</span>/{{allNum}}
+	                </span>
+	                <span v-show="completeShow" style="color: green;font-weight: bold;">全部处理完成</span>
+	                <span v-show="!completeShow&&(successNum>0||errorNum>0)" style="color: red;font-weight: bold;">处理中...</span>
+	            </div>
 			</div>
 			<div id='progress-div'>
-				<div>
-
-				</div>
 				<div id='console-panel'>
 					<div v-for='msgInfo in returnMsgList'>
 						<p class='console-line' v-if='msgInfo.success'>
 							<span><img src='../assets/images/icon_sucess.png'></span>
 							<span>{{msgInfo.fileName}}:{{msgInfo.msg}}</span>
-							<span>处理成功</span>
 						</p>
 						<p class='console-line' v-if='!msgInfo.success'>
 							<span><img src='../assets/images/icon_failed.png'></span>
 							<span>{{msgInfo.fileName}}:{{msgInfo.msg}}</span>
-							<span class='red'>处理失败</span>
 						</p>
 					</div>
 				</div>
@@ -155,41 +165,71 @@
 <script>
     const CryptoJS = require('crypto-js');
     const Base64 = require('js-base64').Base64;
-    const fs = nodeRequire("fs");
 	export default {
 		data() {
 			return {
-				btnText:'上传照片',
-				uploadDisabled:false,
-			    subTextShow: false,
-			    totalCount:0,
+				photoQuantityLimit:10000,//单次上传限制
 			    photoList:[],//总的照片
-			    returnMsgList:[],
-			    successNum:0,
-			    errorNum:0,
-			    allNum:0,
-			    completeProportion:0
+			    photoLine:[],//正在处理的照片
+			    concurrency:10,//同时处理的照片数量
+			    returnMsgList:[],//返回信息
+			    successNum:0,	//成功数量
+			    errorNum:0,		//失败数量
+			    allNum:0,		//总数
+			    completeShow:false,
+			    uploadDisabled:false,
+			    startTime:'',
+			    seconds:0
 			}
 		},
 		methods: {
-			logout() {
-				localStorage.removeItem('rootOrgId');
-				localStorage.removeItem('userName');
-				localStorage.removeItem('user_token');
-				this.$router.push({path: '/login'});
+			init(){
+				this.photoList = [];
+			    this.photoLine = [];
+			    this.returnMsgList = [];
+			    this.successNum = 0;
+			    this.errorNum = 0;
+			    this.allNum = 0;
+			    this.completeShow = false;
 			},
 			importPhotos() {
+				this.init();
 				var photos = document.getElementById('photos');
-				this.photoList = photos.files;
-				if (this.photoList.length>0) {
-				    this.returnMsgList = [];
-				    this.successNum = 0;
-				    this.errorNum = 0;
-				    this.allNum = 0;
-				    /*this.uploadDisabled = true;
-				    this.btnText = '处理中';*/
-	                this.processQueue();
-	            }
+				for(var i = 0;i<photos.files.length;i++){
+					this.photoList.push(photos.files[i]); 
+				}
+				this.allNum = this.photoList.length;
+				if(this.allNum > this.photoQuantityLimit){
+					alert("单次上传文件数量不能大于"+this.photoQuantityLimit+",当前数量为"+photoQuantity);
+	    			photos.files = null;
+					return;
+				}
+				
+				this.photoLine = this.photoList.splice(0, this.concurrency);
+		    	for(var i = 0;i<this.photoLine.length;i++){
+		    		this.processStudentPhoto(this.photoLine[i]);
+		    	}
+                var _this = this;
+                /*var secondInterval = setInterval(function(){
+                	_this.seconds = _this.seconds+1;
+                },1000);*/
+                var uploadTime = setInterval(function(){
+            		//检查photoLine中是否有已经完成的
+		            for (let i = 0; i < _this.photoLine.length; i++) {
+		                if (_this.photoLine[i].finished) {
+		                    if (_this.photoList.length > 0) {
+		                        _this.photoLine[i] = _this.photoList.shift();
+		                        _this.processStudentPhoto(_this.photoLine[i]);
+		                    }
+		                }
+		            }
+		            if (_this.photoList.length < 1) {
+		                //检查看是否全部完成了
+		                console.log('photoList处理完毕');
+		                clearInterval(uploadTime);
+		                //clearInterval(secondInterval);
+		            }
+		        },300);
 			},
 		    isImageFile(file) {
 		        let lowercaseName = file.toLowerCase();
@@ -199,12 +239,6 @@
 		            return false;
 		        }
 		    },
-		    processQueue(){
-		    	this.allNum = this.photoList.length;
-		    	for(var i = 0;i<this.allNum;i++){
-		    		this.processStudentPhoto(this.photoList[i]);
-		    	}
-		    },
 		    
 		    processStudentPhoto(photo) {
 	    		let arr = photo.name.split('.');
@@ -313,7 +347,7 @@
 		            'updateUser':savePhotoInfo.userName,
 		            'createType':'IMPORT_TOOL'
 		        }).then((res)=>{
-		        	this.finishOneBack(true,savePhotoInfo.fileName,'处理成功');
+		        	this.finishOneBack(true,savePhotoInfo.fileName,'处理成功',savePhotoInfo.file);
 		        },(err)=>{
 		        	this.finishOneBack(false,savePhotoInfo.fileName,'saveStudentFaceInfoByPost失败',savePhotoInfo.file);
 		        });
@@ -330,34 +364,44 @@
 		            'updateUser':savePhotoInfo.userName,
 		            'createType':'IMPORT_TOOL'
 		        }).then((res)=>{
-		        	this.finishOneBack(true,savePhotoInfo.fileName,'处理成功');
+		        	this.finishOneBack(true,savePhotoInfo.fileName,'处理成功',savePhotoInfo.file);
 		        },(err)=>{
 		        	this.finishOneBack(false,savePhotoInfo.fileName,'saveStudentFaceInfoByPut失败',savePhotoInfo.file);
 		        });
 		    },
 		    finishOneBack(isSuccess,fileName,msg,file){
+		    	file.finished = true;
 		    	this.returnMsgList.push({'success':isSuccess,'fileName':fileName,'msg':msg});
 	        	if(isSuccess){
 	        		this.successNum++;
 	        	}else{
 	        		this.errorNum++;
-	        		if(fs){
-	        			var errorfilePath = file.path.substring(0,file.path.lastIndexOf("\\"))+"\\errorfiles";
-		        		if (!fs.existsSync(errorfilePath)) {
-	            			fs.mkdirSync(errorfilePath);
-	            		}
-		        		var readStream = fs.createReadStream(file.path);
-						var writeStream = fs.createWriteStream(errorfilePath+"\\"+file.name);
-						readStream.pipe(writeStream);
+	        		//如果存在nodejs环境
+	        		if(typeof(nodeRequire) != "undefined"){
+	    				var fs = nodeRequire("fs");
+		        		if(fs){
+		        			var errorfilePath = file.path.substring(0,file.path.lastIndexOf("\\"))+"\\errorfiles";
+			        		if (!fs.existsSync(errorfilePath)) {
+		            			fs.mkdirSync(errorfilePath);
+		            		}
+			        		var readStream = fs.createReadStream(file.path);
+							var writeStream = fs.createWriteStream(errorfilePath+"\\"+file.name);
+							readStream.pipe(writeStream);
+		        		}
 	        		}
 	        	}
 		    	if(this.errorNum+this.successNum == this.allNum){
-		    		this.btnText = '上传照片';
-		    		this.uploadDisabled = false;
 		    		var photos = document.getElementById('photos');
 		    		photos.files = null;
+		    		this.completeShow = true;
 		    	}
-		    }
+		    },
+		    logout() {
+				localStorage.removeItem('rootOrgId');
+				localStorage.removeItem('userName');
+				localStorage.removeItem('user_token');
+				this.$router.push({path: '/login'});
+			}
 		},
 		created() {
 		}