morePic.vue
3.42 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!---多人脸搜索--->
<template>
<div >
<div >
<el-upload
class="upload-demo"
drag
action=""
:http-request="uploadsearchimg"
:on-remove="handleRemove"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<div class="">
<el-button class="search-btn" @click="searchPic()">查询</el-button>
</div>
</div>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
data() {
return {
address: "",
camera: "",
value: "",
value1: "",
imageUrl:'',
dbname:'',
base64List:[]
};
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file){
const isJPG = file.type === "image/jpeg";
const isLt1M = file.size / 1024 / 1024 < 1;
if (!isJPG) {
this.$message.error("上传头像图片只能是 JPG 格式!");
}
if (!isLt1M) {
this.$message.error("上传头像图片大小不能超过 1MB!");
}
return isJPG && isLt1M;
},
handleRemove(file){
this.base64List.forEach((ele,index) => {
if(file.uid == ele.uid){
this.base64List.splice(index,1)
console.log(this.base64List)
}
})
},
uploadsearchimg(file){
var file = file;
this.base64Img(file).then(res => {
this.imageUrl = res.src
this.base64 = res.pic_base64
debugger
let obj = {}
obj.uid = file.file.uid
obj.pic_base64 = res.pic_base64
this.base64List.push(obj)
})
},
searchPic(){
let baseData = []
this.base64List.forEach(ele => {
baseData.push(ele.pic_base64)
})
let data = {
sessionId: localStorage.getItem("user_id"),
similarity:this.similarity,
crucial_type:this.dbname,
limit:20,
pics_base64:baseData
}
console.log(data);
this.axios.post(this.API.faceweb + '/faces/image_search', data).then((res)=> {
});
}
},
computed:{
...mapGetters(['faceinfo','alarmInfo'])
},
created() {},
watch:{
alarmInfo(val){
if(val.params.msg_type === 'face_img_search'){
this.axios.get(val.params.msg_url).then(res => {
this.$emit('onceFace',res.data)
})
}
}
}
};
</script>
<style lang="stylus" scoped>
.pic-box{
background: #fff;
display flex
height calc(100vh - 110px)
.pic-left-box{
width 230px
box-shadow 3px 0px 3px rgba(0,0,0,.4)
}
}
.upload-demo{
margin-left 10%
}
.search-btn{
margin 50px
}
.pic-search-box{
width 90%
margin 0 auto
color #333
}
.avatar-uploader ,.el-upload {
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
margin 20px
border: 1px dashed #d9d9d9;
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>