头像上传是时裁剪

package.json

@@ -35,7 +35,7 @@
     "quill": "^1.3.7",
     "v-viewer": "^1.5.1",
     "vue": "2.6.10",
-    "vue-cropper": "^0.5.4",
+    "vue-cropper": "^0.5.5",
     "vue-pdf": "^4.1.0",
     "vue-router": "3.0.6",
     "vue-text-format": "^1.2.6",

src/components/vueCropper/index.vue

+<template>
+  <div class="cropper_model">
+    <el-dialog
+      width="80%"
+      title="图片剪裁"
+      class="cropper_model_dlg"
+      :visible.sync="dialogVisible"
+      append-to-body
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <div class="cropper_content">
+        <div class="cropper" style="text-align: center;">
+          <vueCropper
+            ref="cropper"
+            :img="options.img"
+            :outputSize="options.outputSize"
+            :outputType="options.outputType"
+            :info="options.info"
+            :canScale="options.canScale"
+            :autoCrop="options.autoCrop"
+            :autoCropWidth="autoCropWidth"
+            :autoCropHeight="autoCropHeight"
+            :fixed="options.fixed"
+            :fixedBox="options.fixedBox"
+            :fixedNumber="options.fixedNumber"
+            @realTime="previewImg"
+          >
+          </vueCropper>
+          <div class="cropper_btns">
+            <el-button type="primary" @click="goUpload" size="mini">
+              重新上传
+            </el-button>
+            <el-button
+              @click="rotateLeft"
+              icon="el-icon-refresh-left"
+              size="mini"
+              title="左旋转"
+            >
+            </el-button>
+            <el-button
+              @click="rotateRight"
+              icon="el-icon-refresh-right"
+              size="mini"
+              title="右旋转"
+            >
+            </el-button>
+            <el-button @click="changeScale(1)" size="mini" title="放大">
+              +
+            </el-button>
+            <el-button @click="changeScale(-1)" size="mini" title="缩小">
+              -
+            </el-button>
+          </div>
+        </div>
+        <div class="cropper_right">
+<!--          <h3>预览</h3>-->
+          <!-- 预览 -->
+          <div
+            class="cropper_preview"
+            :style="{
+              width: preview.w + 'px',
+              height: preview.h + 'px',
+              overflow: 'hidden',
+              margin: '5px'
+            }"
+          >
+            <div :style="preview.div">
+              <img :src="preview.url" :style="preview.img" alt="" />
+            </div>
+          </div>
+          <div style="margin-top: 20px;">
+            <el-button type="primary" @click="uploadImg" :loading="loading">
+              确定上传
+            </el-button>
+          </div>
+        </div>
+      </div>
+      <!-- <div slot="footer" class="dialog-footer">
+        <el-button @click="downLoad('blob')">下载</el-button>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="uploadImg" :loading="loading">
+          确认
+        </el-button>
+      </div> -->
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { VueCropper } from "vue-cropper";
+export default {
+  components: { VueCropper },
+  props: {
+    // 默认生成截图框宽度
+    autoCropWidth: {
+      type: Number,
+      default: 100
+    },
+    // 默认生成截图框高度
+    autoCropHeight: {
+      type: Number,
+      default: 100
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      loading: false,
+      options: {
+        /*:img="options.img"
+            :outputSize="options.outputSize"
+            :outputType="options.outputType"
+            :info="options.info"
+            :canScale="options.canScale"
+            :autoCrop="options.autoCrop"
+            :autoCropWidth="options.autoCropWidth"
+            :autoCropHeight="options.autoCropHeight"
+            :fixed="options.fixed"
+            :fixedBox="options.fixedBox"
+            :fixedNumber="options.fixedNumber"*/
+        img: "", // 裁剪图片的地址
+        outputSize: 1, // 裁剪生成图片的质量
+        outputType: "png", // 裁剪生成图片的格式
+        info: true, // 裁剪框的大小信息
+        canScale: true, // 图片是否允许滚动缩放
+        autoCrop: true, // 是否默认生成截图狂
+        autoCropWidth: 100, // 默认生成截图框宽度
+        autoCropHeight: 100, // 默认生成截图框高度
+        fixed: false, // 是否开启截图框宽高固定比例
+        fixedBox: false, // 固定截图框大小 不允许改变
+        fixedNumber: [1, 1], // 截图框的宽高比例
+        full: true, // 是否输出原图比例的截图
+        canMove: true, // 上传图片是否可以移动
+        canMoveBox: true, // 截图框能否拖动
+        original: true, // 上传图片按照原始比例渲染
+        centerBox: false, // 截图框是否被限制在图片里面
+        high: false, // 是否按照设备的dpr输出等比例图片
+        infoTrue: true, // true为展示真实输出图片宽高false展示看到的截图框宽高
+        maximgSize: 100, // 限制图片最大宽度和高度
+        enlarge: 1, // 图片根据截图框输出比例倍数
+        mode: "contain" // 图片默认渲染方式(contain, cover, 100px, 100% auto)
+      },
+      filename: 'photo.png',
+      preview: {}
+    };
+  },
+  methods: {
+    open(data, filename) {
+      this.options.img = window.URL.createObjectURL(data);
+      this.dialogVisible = true;
+      this.filename = filename ? filename : this.filename
+    },
+    close(){
+      this.dialogVisible = false;
+    },
+    // base64转图片文件
+    dataURLtoFile(dataurl, filename) {
+      let arr = dataurl.split(",");
+      let mime = arr[0].match(/:(.*?);/)[1];
+      let bstr = atob(arr[1]);
+      let len = bstr.length;
+      let u8arr = new Uint8Array(len);
+      while (len--) {
+        u8arr[len] = bstr.charCodeAt(len);
+      }
+      return new File([u8arr], filename, { type: mime });
+    },
+    downLoad(type) {
+      event.preventDefault();
+      const aLink = document.createElement("a");
+      if (type === "blob") {
+        this.$refs.cropper.getCropBlob(data => {
+          let downImg = window.URL.createObjectURL(data);
+          aLink.download = "photo.png";
+          aLink.href = downImg;
+          aLink.click();
+        });
+      } else {
+        this.$refs.cropper.getCropData(data => {
+          let file = this.dataURLtoFile(data, "test");
+          aLink.href = file;
+          aLink.click();
+        });
+      }
+    },
+    // 左旋转
+    rotateLeft() {
+      this.$refs.cropper.rotateLeft();
+    },
+    // 右旋转
+    rotateRight() {
+      this.$refs.cropper.rotateRight();
+    },
+    // 放大缩小
+    changeScale(num) {
+      num = num || 1;
+      this.$refs.cropper.changeScale(num);
+    },
+    // 实时预览
+    previewImg(data) {
+      this.preview = data;
+    },
+    goUpload() {
+      this.$emit("upAgain");
+    },
+    // 上传图片
+    uploadImg() {
+      let self = this;
+      self.loading = true;
+      this.$refs.cropper.getCropData(data => {
+        let file = this.dataURLtoFile(data, this.filename);
+        // 生成文件类型
+        self.loading = false;
+        this.$emit("getFile",file)
+      });
+    },
+    //自定义上传，裁剪后调用
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.cropper_model_dlg {
+  .cropper_content {
+    margin: 0 auto;
+    width: 700px;
+    height: 450px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+  .cropper {
+    width: 400px;
+    height: 400px;
+    background: yellow;
+  }
+  .cropper_right {
+    width: 300px;
+    text-align: center;
+  }
+  .cropper_preview {
+    margin: 0 auto;
+    display: inline-block;
+    border: 1px solid #ddd;
+  }
+  .cropper_btns {
+    margin-top: 20px;
+  }
+}
+</style>
+

src/views/personalCenter/updateInfo.vue

@@ -88,19 +88,26 @@
                   class="avatar-uploader"
                   :class="{ hide: hideUploadEdit }"
                   action="#"
-                  :http-request="uploadStart"
                   :accept="'.jpg, .png, .jpeg, .JPEG.JPG, .PNG, .bmp, .BMP'"
                   list-type="picture-card"
                   :limit="1"
                   :file-list="fileList"
                   :multiple="false"
+                  :on-change="changePhotoFile"
                   :on-exceed="handleExceed"
                   :on-remove="handleRemove"
-                  :on-change="handlePicChange"
                   :on-preview="handlePictureCardPreview"
                 >
-                  <i v-if="!uploadFlag" class="el-icon-plus avatar-uploader-icon" />
+<!--                  <i v-if="!uploadFlag" class="el-icon-plus avatar-uploader-icon" />-->
+                  <img v-if="imageUrl" :src="imageUrl" style="width: 100%;height: 100%">
+                  <div v-else class=" avatar-uploader-icon">
+                    <div>
+                      <i class="el-icon-plus"></i>
+                    </div>
+
+                  </div>
                 </el-upload>
+                <my-cropper ref="myCropper" @getFile="getFile" @upAgain="upAgain"></my-cropper>
               </el-form-item>
               <el-dialog :visible.sync="dialogVisible">
                 <img width="100%" :src="dialogImageUrl" alt="">
@@ -121,11 +128,13 @@ import HomeSearch from '@/views/homePage/components/searchHome/index'
 import { messageSubmit, uploadPublic } from './apis'
 import {uploadAvatar} from "@/api/system/user";
 import headImg from '../../assets/image/touxiang.png'
+import MyCropper from '@/components/vueCropper/index'
 
 export default {
   name: 'UpdateInfo',
   components: {
-    HomeSearch
+    HomeSearch,
+    MyCropper
   },
   data() {
     var checkEmail = (rule, value, callback) => {
@@ -226,6 +235,47 @@ export default {
     handleExceed(files, fileList) {
       this.$message.warning(`超出文件限制上传数量`)
     },
+    getFile(file) {
+      console.log('file',file)
+      let formData = new FormData();
+      let path = 'personal'
+      formData.append("file",file)
+      formData.append('path', path)
+      uploadPublic(formData).then(res=>{
+        if(res.code === 200) {
+          this.form.avatar = res.data.url //表单的图片字段存上传后反显的ID
+          this.form.headAddress = res.data.id
+          this.imageUrl = res.data.url
+          //上传成功后，关闭弹框组件
+          // this.handleCrop(file);
+          this.$refs.myCropper.close()
+          // this.$refs.form.validateField('img')
+          this.$message({
+            type: 'success',
+            message: '上传成功'
+          })
+        }
+      })
+    },
+    /** upload组件change事件*/
+    changePhotoFile(file, fileList) {
+      console.log('file',file)
+      const isLt = file.size / 1024 / 1024 < 2;
+      if (!isLt) {
+        this.$message.error(`上传文件大小不能超过  2MB!`);
+      } else {
+        this.handleCrop(file);
+      }
+    },
+    handleCrop(file){
+      this.$nextTick(()=>{
+        this.$refs.myCropper.open(file.raw || file)
+      })
+    },
+    /** 点击弹框重新时触发*/
+    upAgain(){
+      this.$refs['test'].$refs["upload-inner"].handleClick();
+    },
     /** 头像上传接口*/
     uploadStart(file) {
       console.log('file', file)