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