个人信息更换头像图片

src/views/screenAdaptation/pages/homePages/menuTop/personMsgModal.vue

@@ -25,18 +25,28 @@
                     <div class="colRightTbox">
                         <div class="titleLogo">头像信息</div>
                         <div class="mypicture">
+                            <!--<img :src="headPortraitSrc" alt="" style="display:inline-block;width: 100%;height: 100%;"-->
+                            <!--ref="imgChange">-->
                             <img src="" alt="" style="display:inline-block;width: 100%;height: 100%;"
                                  ref="imgChange">
                         </div>
                         <div class="editIcon">
-                            <img src="./images/rotate-left.png" alt="" @click="rotateLeftFn">
+                            <img src="./images/rotate-left.png" alt="" @click="rotateLeftFn(0)">
-                            <img src="./images/rotate-right.png" alt="" @click="rotateRightFn">
+                            <img src="./images/rotate-right.png" alt="" @click="rotateLeftFn(1)">
-                            <img src="./images/search-plus.png" alt="" @click="searchPlusFn">
+                            <img src="./images/search-plus.png" alt="" @click="searchPlusFn(0)">
-                            <img src="./images/search-minus.png" alt="" @click="searchMinusFn">
+                            <img src="./images/search-minus.png" alt="" @click="searchPlusFn(1)">
                         </div>
+                        <!--<a-upload maxCount="1" accept=".jpg,.jpeg,.png,.bmp" list-type="picture"-->
+                        <!--class="fixBtnChange" @change="picFileChange">更换图片-->
+                        <!--</a-upload>-->
                         <a-upload maxCount="1" accept=".jpg,.jpeg,.png,.bmp" list-type="picture"
+                                  v-model:file-list="fileListPic" :before-upload="beforeUpload"
                                   class="fixBtnChange" @change="picFileChange">更换图片
                         </a-upload>
+                        <!--<a-upload v-model:file-list="fileListPic" maxCount="1" accept=".jpg,.jpeg,.png,.bmp"-->
+                        <!--@change="picFileChange">-->
+                        <!--<a-button class="fixBtnChange">更换图片</a-button>-->
+                        <!--</a-upload>-->
                         <a-button class="fixBtnSave" type="primary">保存头像</a-button>
                         <span>仅支持.jpg.jpeg.png.bmp图片格式</span>
                     </div>
@@ -78,6 +88,8 @@
                 key: '',
                 file: '',
                 fileList: [],
+                fileListPic: [],
+                headPortraitSrc: '',
             }
         },
         components: {
@@ -97,26 +109,30 @@
             cancelModal() {
                 this.$emit('cancelModal')
             },
-            rotateLeftFn() {
+            rotateLeftFn(val) {
-                this.leftRight += 90
+                if (val === 0) {
-                this.$refs.imgChange.style.transform = 'rotate(' + this.leftRight + 'deg)'
+                    this.leftRight += 90
-                console.log(this.left)
+                } else if (val === 1) {
-            },
+                    this.leftRight -= 90
-            rotateRightFn() {
+                }
-                this.leftRight -= 90
                 this.$refs.imgChange.style.transform = 'rotate(' + this.leftRight + 'deg)'
             },
-            searchPlusFn() {
+            searchPlusFn(val) {
-                this.plusMinus += 0.1
+                if (val === 0) {
-                this.$refs.imgChange.style.transform = 'scale(' + this.plusMinus + ')'
+                    this.plusMinus += 0.1
-            },
+                } else if (val === 1) {
-            searchMinusFn() {
+                    this.plusMinus -= 0.1
-                this.plusMinus -= 0.1
+                }
                 this.$refs.imgChange.style.transform = 'scale(' + this.plusMinus + ')'
             },
             picFileChange(val) {
-                this.$refs.imgChange.src=''
+                let targetUrl = val.fileList[val.fileList.length - 1]
-                this.$refs.imgChange.src = val.file.thumbUrl
+                this.$refs.imgChange.src = targetUrl.thumbUrl
+                //this.headPortraitSrc = targetUrl.thumbUrl
+                console.log('imgChange', this.$refs.imgChange.src == targetUrl.thumbUrl)
+            },
+            beforeUpload(){
+                //this.$refs.imgChange.src = ''
             },
             modifyIDphoto(val) {
                 console.log('图片信息', val)
@@ -130,7 +146,7 @@
             },
             uploadComplete: function (file) {
                 this.fileList = file
-//console.log('filess', this.fileList)
+                //console.log('filess', this.fileList)
             },
             getChangeModifyPhoto() {
                 let param = {
@@ -196,6 +212,10 @@
         height: 110px !important;
     }
 
+    /deep/ .ant-upload-list {
+        display: none;
+    }
+
     /deep/ .ant-modal-content {
         background: none !important;
         border: 3px solid #03EFFD !important;