| 
					
				 | 
			
			
				@@ -3,22 +3,22 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   <div class="container"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     <div class="result-container"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--      <span style="width: 400px;height: 300px">自定义</span>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <!--      <span style="width: 400px;height: 300px">自定义</span>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       <el-skeleton style="width:600px;height: 300px" :loading="isLoading" animated> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         <template slot="template"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				           <el-skeleton-item 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				               variant="image" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				               style="width: 600px; height: 300px;" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				           /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--          <div style="padding: 14px;">--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--            <el-skeleton-item variant="h3" style="width: 50%;" />--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--            <div--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--                style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--            >--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--              <el-skeleton-item variant="text" style="margin-right: 16px;" />--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--              <el-skeleton-item variant="text" style="width: 30%;" />--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--            </div>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--          </div>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <!--          <div style="padding: 14px;">--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <!--            <el-skeleton-item variant="h3" style="width: 50%;" />--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <!--            <div--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <!--                style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <!--            >--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <!--              <el-skeleton-item variant="text" style="margin-right: 16px;" />--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <!--              <el-skeleton-item variant="text" style="width: 30%;" />--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <!--            </div>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <!--          </div>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         </template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         <template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				           <el-card :body-style="{ padding: '0px', marginBottom: '1px' }"> 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -36,35 +36,48 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         </template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       </el-skeleton> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--      <el-card style="width: 700px;height: 300px">--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--<!–      –>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--      <el-image  :src="resPic" v-if="resPic!=null">--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--        <div slot="placeholder" class="image-slot">--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--          加载结果<span class="dot">...</span>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--        </div>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--      </el-image>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<!--    </el-card>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <!--      <el-card style="width: 700px;height: 300px">--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <!--<!–      –>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <!--      <el-image  :src="resPic" v-if="resPic!=null">--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <!--        <div slot="placeholder" class="image-slot">--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <!--          加载结果<span class="dot">...</span>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <!--        </div>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <!--      </el-image>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <!--    </el-card>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!--    <div class="upload-container">--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!--      <el-upload--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!--          class="avatar-uploader"--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!--          :action="'/files/upload'"--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!--          :headers="{ token: user.token }"--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!--          list-type="picture"--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!--          :on-success="handleUploadSuccess"--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!--      >--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!--        <el-button type="primary">上传商品害虫图片</el-button>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!--      </el-upload>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<!--    </div>--> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     <div class="upload-container"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       <el-upload 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				           class="avatar-uploader" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          :action="$baseUrl + '/files/upload'" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          :action="'/files/upload'" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				           :headers="{ token: user.token }" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				           list-type="picture" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				           :on-success="handleUploadSuccess" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          :http-request="uploadInStream" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       > 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         <el-button type="primary">上传商品害虫图片</el-button> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       </el-upload> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 </template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 <script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import axios from "axios"; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 export default { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   name: "PestAnalysis", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   data() { 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -72,7 +85,7 @@ export default { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       user :JSON.parse(localStorage.getItem('xm-user') || '{}'), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       uploadResult: null, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       returnResult: null, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      flaskBaseUrl: '', // Flask地址 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      flaskBaseUrl: this.$flaskUrl, // Flask地址 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       resPic:null, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       isLoading:false, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     }; 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -84,10 +97,109 @@ export default { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         this.resPic = require("/src/assets/imgs/query_result.png") 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         this.isLoading = false; // 加载完成 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       },2000) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-      var fileReader = new FileReader(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       return file 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-    uploadImg(){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    fileToBase64(file){ // 获取文件base64 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      return new Promise((resolve,reject)=>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const reader = new FileReader(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        reader.readAsDataURL(file); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        reader.onload = (e)=>resolve(reader.result.split(",").pop()); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        reader.onerror = (error)=>reject(error); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    fileToByteStream(file){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      return new Promise((resolve,reject)=>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const reader = new FileReader(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        reader.readAsBinaryString(file); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        reader.onload = (e)=>resolve(reader.result); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        reader.onerror = (error)=>reject(error); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    fileToArrayBuffer(file){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      return new Promise((resolve,reject)=>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const reader = new FileReader(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        reader.readAsArrayBuffer(file); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        reader.onload = (e)=>resolve(reader.result); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        reader.onerror = (error)=>reject(error); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    bytesToBlobGetImgUrl(bytes){ // 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      var blob = new Blob([bytes],{type:'image/jpeg'}) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      var imgUrl =  URL.createObjectURL(blob) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      return imgUrl 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    upload(upload){ // 上传文件信息 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      const file = upload.file 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      this.fileToBase64(file).then(base64=>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // console.log(base64) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        axios.post(this.flaskBaseUrl+'/upload',{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          base64 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }).then(res=>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          console.log(JSON.parse(res),"res") 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    uploadInStream(upload){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      const file = upload.file 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      this.fileToArrayBuffer(file).then(arrayBuffer=>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const bytes = new Uint8Array(arrayBuffer) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const formData = new FormData(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        axios.post(this.flaskBaseUrl+'/query',bytes,{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          headers: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            'Content-Type': 'multipart/form-data' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }).then(res=>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          this.resPic = 'data:image/jpeg;base64,'+res.data 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    uploadStream(upload){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      const file = upload.file 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      this.fileToArrayBuffer(file).then(arrayBuffer=>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const bytes = new Uint8Array(arrayBuffer) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // formData.append("file",bytes) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        console.log(bytes) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        axios.post(this.flaskBaseUrl+'/query',{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          "file":JSON.stringify(bytes) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        },{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          headers: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            'Content-Type': 'application/json' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }).then(res=>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          console.log(res,"res") 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    uploadImg(upload){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      const file = upload.file 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      const onProgress = file.onProgress 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      const onSucess = file.onSucess 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      let xhr // 全局请求 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      var reader = new FileReader(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      reader.onload = e=>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        var result = e.target.result; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        const base64 = result.split(',').pop() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        xhr = new XMLHttpRequest() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        console.log(reader.result,e,"readerE",upload) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        // TODO 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        xhr.onload= function(){ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          const resp = JSON.parse(xhr.responseText) // 获取响应结果 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        xhr.upload.onprogress = (e)=>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          const percent = Math.floor((e.loaded / e.total)*100 ) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          console.log(percent,"percent!") 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        console.log(result) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      reader.onFinished = e=>{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      reader.readAsDataURL(file) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   } 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -116,4 +228,4 @@ export default { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 .result-container { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   margin-top: 20px; /* 调整上方间距 */ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-</style> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</style> 
			 |