更换 图片选择器

src/projects/business/views/Guest/To/Info.vue

@@ -42,17 +42,22 @@
           </div>
           <div class="mui-input-row">
             <label style="width: 50%"
-              >人脸识别照片<i class="iconfont icon-tishi color4fc5f7"></i
+              >人脸识别照片<i class="iconfont icon-tishi color4fc5f7"  @click="valert"></i
             ></label>
+
+
+
             <button
-              class="mui-btn mui-btn-block mui-navigate-right"
-              type="button"
-              style="width: 50%"
-              @click="chooseImage(detail)"
+                    class="mui-btn mui-btn-block mui-navigate-right"
+                    type="button"
+                    style="width: 50%"
+
+                    @click="clickMyFile(detail)"
             >
-              <!--请上传-->
-							<img src="~$project/assets/img/audit1.png" /> 
+            <div  v-if="!detail.photo">请上传</div>
+            <img     v-if="detail.photo" :src="detail.photo">
             </button>
+            <!--请上传-->
           </div>
           <div class="mui-input-row">
             <label>来访单位</label>
@@ -136,15 +141,16 @@
           </div>
           <div class="mui-input-row">
             <label style="width: 50%"
-            >人脸识别照片<i class="iconfont icon-tishi color4fc5f7"></i
+            >人脸识别照片<i class="iconfont icon-tishi color4fc5f7" @click="valert"></i
             ></label>
             <button
                     class="mui-btn mui-btn-block mui-navigate-right"
                     type="button"
                     style="width: 50%"
-                    @click="chooseImage(item)"
+                    @click="clickMyFile(item)"
             >
-              请上传
+              <div  v-if="!item.photo">请上传</div>
+              <img     v-if="item.photo" :src="item.photo">
             </button>
           </div>
           <div class="mui-input-row"   @click="del(index)" style="text-align: center;color: red">
@@ -204,6 +210,8 @@
     <cropper :cwidth="cropperWidth" :cheight="cropperHeight" :visible="cropperVisible" :field="cropperField" :cropper="cropper"
              @cropperFinish="cropperFinish" @cropperCancel="cropperCancel"></cropper>
     <loading :visible="isLoading"></loading>
+    <input type="file" ref="myFile"  style="display: none" class="mui-btn mui-btn-block mui-navigate-right" accept="image/*" @change="uploadPicture($event)"/>
+
 
   </div>
 </template>
@@ -215,6 +223,7 @@
   import Loading from '$project/components/Loading.vue'
   import TopHeader from '$project/components/TopHeader.vue'
   import QRCode from 'qrcodejs2'
+  import Cropper from '$project/components/Cropper.vue'
 
   import {
     mapGetters,
@@ -232,7 +241,7 @@
     components: {
       Common,
       Loading,
-      TopHeader
+      TopHeader,	Cropper
     },
     data() {
       return {
@@ -240,6 +249,7 @@
         id: '',
         step:'1',
         detail: {
+          name:''
         },
         subForm:{
           id:'',
@@ -283,6 +293,13 @@
       this.subForm.id=this.id;
     },
     methods:  {
+      valert(){
+        mui.alert("该照片仅用于访客在访问期间，快速识别人脸进入时使用，访问结束后自动清除数据。",'   ',['知道了'])
+      },
+      clickMyFile(mod){
+        this.indexModel=mod;
+        this.$refs.myFile.click();
+      },
       save(){
         if(this.subForm.list.length){
           for(var m in this.subForm.list){
@@ -315,13 +332,10 @@
         return sz;
       },
       //微信选择图片
-      uploadPicture(event,mod) {
-        this.indexModel=mod;
-
-        var files =  event.target.files;
+      uploadPicture(event) {
 
-         // var localData =  event.target.files[0];
 
+        var files =  event.target.files;
        var  reader = new FileReader();
        var _this=this;
         if(files && files[0]) {
@@ -337,7 +351,7 @@
             _this.imgBase64 = localData;
             //显示裁剪图片
             _this.showCropper('photo');
-            _this.uploadpic();
+          //  _this.uploadpic();
           }
           reader.readAsDataURL(files[0]);