切图上传

pc/src/components/upHead.vue

@@ -10,7 +10,7 @@
                 <img v-if="imageUrl" :src="imageUrl" class="avatar">
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
             </el-upload>
-            <!--<ImgCutter v-on:cutDown="cutDown"></ImgCutter>-->
+            <ImgCutter v-on:cutDown="cutDown"></ImgCutter>
         </div>
     </div>
 </template>
@@ -28,11 +28,17 @@
                 // domain: 'https://up-z1.qiniup.com',
                 // 这是七牛云空间的外链默认域名
                 // qiniuaddr: 'qjzpcd34v.hb-bkt.clouddn.com',
+                // domain: 'https://up-z1.qiniup.com', // 这是七牛云空间的外链默认域名
                 domain: 'https://up-z1.qiniup.com', // 这是七牛云空间的外链默认域名
                 qiniuaddr: 'xhead.beswell.com',//xhead.beswell.com 旧的 qjzpcd34v.hb-bkt.clouddn.com
             };
         },
         methods: {
+            cutDown(e){
+                console.log(e);
+                this.imageUrl = e.dataURL;
+                this.upqiniu(e);
+            },
             // 上传文件到七牛云
             upqiniu(req) {
                 const config = {
@@ -64,13 +70,13 @@
             },
             // 验证文件合法性
             beforeUpload(file) {
-                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
-                const isLt2M = file.size / 1024 / 1024 < 2;
-                if (!isJPG) {
-                    this.$message.error('上传头像图片只能是 JPG 格式!')
-                }
+                // const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
+                const isLt2M = file.size / 1024 / 1024 < 70;
+                // if (!isJPG) {
+                //     this.$message.error('上传头像图片只能是 JPG 格式!')
+                // }
                 if (!isLt2M) {
-                    this.$message.error('上传头像图片大小不能超过 2MB!')
+                    this.$message.error('上传头像图片大小不能超过 70MB!')
                 }
                 return isJPG && isLt2M
             }

pc/src/views/Member.vue

@@ -296,9 +296,10 @@
                                         :http-request=upqiniu
                                         :show-file-list="false"
                                         :before-upload="beforeUpload">
-                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
-                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                                    <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
                                 </el-upload>
+                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
+                                <ImgCutter v-on:cutDown="cutDown"></ImgCutter>
                             </div>
                         </el-form-item>
                         <el-form-item label="出生年份" :required="true">
@@ -397,6 +398,7 @@
 
 <script>
     import Global from '../Global.js'
+    import ImgCutter from 'vue-img-cutter'
     import {
         VipUserListQuery,
         ClassListQuery,
@@ -582,6 +584,11 @@
             goRelevance(row) {
                 this.$router.push({path: '/relevancePhone', query: {userId: row.UserInfo.Id}});
             },
+            cutDown(e){
+                console.log(e);
+                this.imageUrl = e.dataURL;
+                this.upqiniu(e);
+            },
             // 上传文件到七牛云
             upqiniu(req) {
                 let that = this;
@@ -1329,10 +1336,11 @@
                     // 读取列表
                     this.getTableQuery();
                 }
-            }
-            ,
+            },
+        },
+        components: {
+            ImgCutter
         }
-        ,
     }
 </script>
 
@@ -1486,7 +1494,7 @@
     }
 
     .avatar-uploader {
-        border: 1px solid #ccc;
+        /*border: 1px solid #ccc;*/
         cursor: pointer;
         border-radius: 5px;
     }