add vue-cropper

package.json

@@ -17,6 +17,7 @@
     "nprogress": "^0.2.0",
     "viser-vue": "^2.3.0",
     "vue": "^2.5.17",
+    "vue-cropper": "^0.3.6",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   },

src/views/user/Index.vue

@@ -22,6 +22,30 @@
 
       <a-card>
         <a-form>
+          <a-row :gutter="24" :style="{ marginBottom: '24px' }">
+            <a-col :sm="12" :xs="24" :style="{ height: '250px' }">
+              <vue-cropper
+                style="width: 300px;position: absolute; left: 50%"
+                ref="cropper"
+                :img="option.img"
+                :outputSize="option.size"
+                :outputType="option.outputType"
+                :info="option.info"
+                :autoCrop="option.autoCrop"
+                :autoCropWidth="option.autoCropWidth"
+                :autoCropHeight="option.autoCropHeight"
+                :fixedBox="option.fixedBox"
+                @realTime="realTime"
+              >
+              </vue-cropper>
+            </a-col>
+            <a-col :sm="12" :xs="24" :style="{ height: '250px' }">
+              <div class="ant-upload-preview">
+                <img :src="preview.url" :style="preview.img"/>
+              </div>
+            </a-col>
+          </a-row>
+
           <a-form-item
             label="昵称"
             :labelCol="{span: 7}"
@@ -93,10 +117,14 @@
 
   import HeadInfo from '@/components/tools/HeadInfo'
   import ASelect from "ant-design-vue/es/select";
+  import AForm from "ant-design-vue/es/form/Form";
+  import VueCropper from "vue-cropper/example/src/vue-cropper/vue-cropper";
 
   export default {
     name: "Index",
     components: {
+      VueCropper,
+      AForm,
       ASelect,
       LayoutMain,
       PageLayout,
@@ -108,6 +136,24 @@
         welcome: welcome(),
         avatar: '',
         user: {},
+
+        // cropper
+        preview: {},
+        option: {
+          img: 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
+          info: true,
+          size: 1,
+          outputType: 'jpeg',
+          canScale: false,
+          autoCrop: true,
+          // 只有自动截图开启 宽度高度才生效
+          autoCropWidth: 180,
+          autoCropHeight: 180,
+          fixedBox: true,
+          // 开启宽度和高度比例
+          fixed: true,
+          fixedNumber: [1, 1]
+        }
       }
     },
     computed: {
@@ -119,9 +165,30 @@
       this.user = this.userInfo
       this.avatar = this.userInfo.avatar
     },
+    methods: {
+
+      realTime (data) {
+        this.preview = data
+      }
+    }
   }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  .avatar-upload-wrapper {
+    height: 200px;
+    width: 100%;
+  }
 
+  .ant-upload-preview {
+    width: 180px;
+    height: 180px;
+    border-radius: 50%;
+    box-shadow: 0 0 4px #ccc;
+    position: absolute;
+    top: 50%;
+    left: 15%;
+    margin-top: -90px;
+    overflow: hidden;
+  }
 </style>
\ No newline at end of file

yarn.lock

@@ -3118,6 +3118,10 @@ execa@^0.8.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+exif-js@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/exif-js/-/exif-js-2.3.0.tgz#9d10819bf571f873813e7640241255ab9ce1a814"
+
 expand-brackets@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
@@ -7485,6 +7489,12 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vue-cropper@^0.3.6:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/vue-cropper/-/vue-cropper-0.3.6.tgz#d83de3d18ed2ab72e092c93850acd5f7b6d8fe36"
+  dependencies:
+    exif-js "^2.3.0"
+
 vue-eslint-parser@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"