morePic.vue

<!--多人脸搜索-->
<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'){
        if(sessionStorage.getItem('activename')=='more'){
          console.log('www')
          setTimeout(()=>{
            this.axios.get(val.params.msg_url).then(res => {
              console.log('aaaa',res.data)
              this.$emit('moreFace',res.data)
            })
          },500)
        }
      }
    }
  }
};
</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>