aiforge/web_src/vuepages/pages/model/tuomin/index.vue

<template>
    <div class="ui container">
      <div class="tuomin-title">
        <h2>{{$t('dataDesensitizationModelExperience')}}</h2>
        <p>{{$t('dataDesensitizationModelDesc')}} &nbsp;<a href="https://git.openi.org.cn/tengxiao/tuomin" target="_blank">tengxiao / tuomin</a></p>
      </div>
      <el-row :gutter="12" style="margin-top: 33px;">
        <el-col :xs="24" :span="12">
          <div class="tuomin-content-image">
              <div class="tuomin-icon">
                <i class="ri-image-line" style="font-size: 16px;margin-right:2px;"></i>
                <span style="font-size: 12px;">img</span>
              </div>
              <div style="height:230px;width: 96%;margin: 0 auto;">
                <el-upload 
                  action="#" 
                  accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
                  :show-file-list="false" 
                  :on-change="handleChangePicture"
                  list-type="picture-card"
                  :file-list="fileList"
                  :style="{display:(ImageUrl ? 'none':'block')}"
                  :auto-upload="false"
                  >
                    <div class="el-upload__text">{{$t('dragThePictureHere')}}<span style="color: rgba(136, 136, 136, 0.87);">{{$t('or')}}</span>{{$t('clickUpload')}}</div>
                </el-upload>

                <img class="preview-image" v-if="ImageUrl" :src="ImageUrl" alt="">
              </div>
              <div>
                  <div class="tuomin-radio-model">
                    <label class="radio-label">{{$t('desensitizationObject')}}：</label>
                    <div>
                      <el-radio-group v-model="radio">
                        <el-radio :label="2">{{$t('all')}}</el-radio>
                        <el-radio :label="1">{{$t('onlyFace')}}</el-radio>
                        <el-radio :label="0">{{$t('onlyLicensePlate')}}</el-radio>
                      </el-radio-group>
                    </div>
                    
                  </div>
                  <div class="tuomin-button-model">
                    <el-button @click="cancelUpload">{{$t('cancel')}}</el-button>
                    <el-button :disabled="fileList.length<1" @click="startTranform" type="primary">{{$t('startDesensitization')}}</el-button>
                  </div>
              </div>
          </div>
        </el-col>
        <el-col :xs="24" :span="12">
          <div class="tuomin-content-image" v-loading="tranformImageLoading">
            <div class="tuomin-icon">
              <i class="ri-image-line" style="font-size: 16px;margin-right:2px;"></i>
              <span style="font-size: 12px;">output</span>
            </div>
            <div style="height: 358px;">
              <el-image 
                 style="height: 100%;width: 100%;"
                :src="resultImgSrc" 
                :preview-src-list="[resultImgSrc]">
                <div slot="error" class="image-slot">
                  <i style="font-size: 0;" class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              
            </div>
          </div>
        </el-col>
      </el-row>
      
      <div style="margin: 39px 0 21px 0;">
        <span>{{$t('example')}}：</span>
      </div>
      
      <div class="table-container">
        <div>
          <el-table border  :data="tableData1" style="width:100%">
            <el-table-column :label="$t('originPicture')" align="center">
              <template slot-scope="scope">
                <div style="width: 100%;height:200px;">
                  <el-image 
                    style="height: 100%;width: 100%;"
                    :src="scope.row.imgSrc1" 
                    :preview-src-list="[scope.row.imgSrc1]">
                    <div slot="error" class="image-slot">
                      <i style="font-size: 0;" class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  
                </div>
                
                
              </template>
            </el-table-column>
            <el-table-column :label="$t('desensitizationPicture')" align="center">
              <template slot-scope="scope">
                <div style="width: 100%;height:200px;">
                  <el-image 
                    style="height: 100%;width: 100%;"
                    :src="scope.row.imgSrc2" 
                    :preview-src-list="[scope.row.imgSrc2]">
                    <div slot="error" class="image-slot">
                      <i style="font-size: 0;" class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  
                </div>
                
              </template>
            </el-table-column>
            <el-table-column prop="mode" :label="$t('desensitizationObject')" align="center" header-align="center">
            </el-table-column>

          </el-table>
        </div>
        
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        ImageUrl:'',
        radio:2,
        file:'',
        fileList:[],
        resultImgSrc:'',
        tranformImageLoading:false,
        tableData1:[{
          imgSrc1:'/img/origin.png',
          imgSrc2:'/img/tuomin.png',
          mode:this.$t('all')
        }]
      };
    },
    components: {},
    methods: {
      // 选择文件、移除文件、上传文件成功/失败后，都会触发
      handleChangePicture(file,fileList) {
        console.log("----change:",file,fileList)
        let acceptList = ["jpg", "jpeg",'png']
        // 根据文件名获取文件的后缀名
        let fileType = file.name.split('.').pop().toLowerCase()
        // 判断文件格式是否符合要求
        if (acceptList.indexOf(fileType) === -1) {
            this.$message.error(this.$t('limitFilesUpload'));
            return false
        }
        // 判断文件大小是否符合要求
        if (file.size / 1024 / 1024 > 20) {
            this.$message.error(this.$t('limitSizeUpload'));
            return false
        }

        this.ImageUrl = URL.createObjectURL(file.raw);
        this.file = file
        this.fileList = fileList
      },
      cancelUpload(){
        this.ImageUrl = ''
        this.file=''
        this.fileList = []
      },
      startTranform(){
        if(!this.file)return
        let fd = new FormData();
        fd.append('file', this.file.raw);
        console.log(fd.get("file"))
        this.tranformImageLoading = true
        axios({
          method:'POST',
          url: '/extension/tuomin/upload',
          headers: {'Accept': 'image/png'},
          responseType: 'blob',
          params: { mode: this.radio },
          data:fd
        }).then(res => {
          console.log(res)
          const objectURL = URL.createObjectURL(res.data);
          this.resultImgSrc = objectURL;
          this.tranformImageLoading = false
        }).catch(err => {
          console.log(err);

          this.tranformImageLoading = false;
          if (err.response.status === 400) {
               const fr = new FileReader();
               fr.onload = (e) => {
                 try {
                   const jsonResult = JSON.parse(e.target.result);
                   this.$message({
                     type: 'error',
                     message: jsonResult.Message
                   });
                 } catch (e) {
                   this.$message({
                     type: 'error',
                     message: this.$t('tranformImageFailed')
                   });
                 }
               };
               fr.readAsText(err.response.data);
          }else{

          this.$message({
            type: 'error',
            message: this.$t('tranformImageFailed')
          });
          }
        })

      },

      
    },
    mounted() {

    },
    beforeDestroy() {
    },
  };
  </script>
  
  <style scoped lang="less">
  .tuomin-title{
    margin-top: 34px;
    h2 {
      display: flex;
      justify-content: center;
    }
    p{
      display: flex;
      justify-content: center;
      color: rgba(136, 136, 136, 0.87);
    }
  }
  .tuomin-content-image{
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    min-height: 358px;
    position: relative;
    .tuomin-icon {
      display: flex;
      align-items: center;
      position: absolute;
      left: 0;
      top: 0;
      width: 66px;
      height: 22px;
      justify-content: center;
      color: rgba(136, 136, 136, 0.87);
      border-radius: 5px 0px 10px 0px;
      border: 1px solid rgba(0, 0, 0, 0.1);
    }
    .el-upload__text{
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .preview-image{
      height: 100%;
      width: 100%;
    }
    .tuomin-radio-model{
      display: flex;
      margin: 25px 12px 0 12px;
      .radio-label{
        font-weight: 600;
        margin-right: 4px;
        color: rgba(16, 16, 16, 1);
      }
    }
    .tuomin-button-model{
      text-align: right;
      margin: 22px 12px 0 12px;

    }
  }
  /deep/ .el-upload--picture-card{
    width: 100%;
    background: #ffff;
    border: none;
    border-bottom: 1px dashed #888;
    border-radius: 0;
    min-height: 230px;
  }
  
  .table-container {
    margin-bottom: 16px;
  
    /deep/ .el-table__header {
      th {
        background: rgb(245, 245, 246);
        font-size: 14px;
        color: rgb(36, 36, 36);
        font-weight: 400;
      }
    }
  
    /deep/ .el-table__body {
      td {
        font-size: 14px;
      }
    }
  
  }
  .center {
    display: flex;
    justify-content: center;
  }

  @media screen and (max-width:768px){
      body{
          background-color: black
      }
  }
  </style>