fix issue

templates/model/tuomin/upload.tmpl

@@ -1,6 +1,11 @@
 {{template "base/head" .}}
 <link rel="stylesheet" href="{{StaticUrlPrefix}}/css/vp-model-tuomin.css?v={{MD5 AppVer}}" />
 <div>
+  {{if .Flash}}
+		<div class="sixteen wide column">
+			{{template "base/alert" .}}
+		</div>
+	{{end}}
   <div id="__vue-root"></div>
 </div>
 <script src="{{StaticUrlPrefix}}/js/vp-model-tuomin.js?v={{MD5 AppVer}}"></script>

web_src/vuepages/langs/config/en-US.js

@@ -190,7 +190,8 @@ const en = {
   clickUpload:'Click upload',
   dataDesensitizationModelExperience:'Data desensitization model experience',
   dataDesensitizationModelDesc:'Use AI technology to desensitize the face and license plate number in the picture. For more information about this model, please visit the project',
-
+  limitFilesUpload:'Only jpg/jpeg/png files can be uploaded',
+  limitSizeUpload:'The size of the uploaded file cannot exceed 20M!',
 }
 
 export default en;

web_src/vuepages/langs/config/zh-CN.js

@@ -190,6 +190,8 @@ const zh = {
   clickUpload:'点击上传',
   dataDesensitizationModelExperience:'数据脱敏模型体验',
   dataDesensitizationModelDesc:'利用人工智能AI技术，把图片中的人脸、车牌号码进行脱敏处理。该模型更多信息请访问项目',
+  limitFilesUpload:'只能上传 jpg/jpeg/png 格式的文件',
+  limitSizeUpload:'上传文件大小不能超过 20M !',
 }
 
 export default zh;

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

@@ -14,11 +14,11 @@
               <div style="height:230px;width: 96%;margin: 0 auto;">
                 <el-upload 
                   action="#" 
-                  accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
+                  accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
                   :show-file-list="false" 
-                  :on-change="handleLicensePreview"
-                  :before-upload="beforeLicenseUpload"
+                  :on-change="handleChangePicture"
                   list-type="picture-card"
+                  :file-list="fileList"
                   :style="{display:(ImageUrl ? 'none':'block')}"
                   :auto-upload="false"
                   >
@@ -41,7 +41,7 @@
                   </div>
                   <div class="tuomin-button-model">
                     <el-button @click="cancelUpload">{{$t('cancel')}}</el-button>
-                    <el-button @click="startTranform" type="primary">{{$t('startDesensitization')}}</el-button>
+                    <el-button :disabled="fileList.length<1" @click="startTranform" type="primary">{{$t('startDesensitization')}}</el-button>
                   </div>
               </div>
           </div>
@@ -76,14 +76,35 @@
           <el-table border  :data="tableData1" style="width:100%">
             <el-table-column :label="$t('originPicture')" align="center">
               <template slot-scope="scope">
-                <img :src="scope.row.imgSrc1" alt="">
-                <span style="margin-left: 10px">{{ scope.row.imgSrc1}}</span>
+                <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">
-                <img :src="scope.row.imgSrc2" alt="">
-                <span style="margin-left: 10px">{{ scope.row.imgSrc1}}</span>
+                <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">
@@ -105,27 +126,46 @@
         ImageUrl:'',
         radio:2,
         file:'',
+        fileList:[],
         resultImgSrc:'',
         tranformImageLoading:false,
         tableData1:[{
-          imgSrc1:'/img/jian.svg',
-          imgSrc2:'/img/jian.svg',
-          mode:this.$t('onlyLicensePlate')
+          imgSrc1:'/img/origin.png',
+          imgSrc2:'/img/tuomin.png',
+          mode:this.$t('all')
         }]
       };
     },
     components: {},
     methods: {
-      handleLicensePreview(file) {
-        console.log(file)
+      // 选择文件、移除文件、上传文件成功/失败后，都会触发
+      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"))
@@ -152,9 +192,7 @@
         })
 
       },
-      beforeLicenseUpload(){
-        console.log("----------")
-      },
+
       
     },
     mounted() {