修复裁剪二次调用图片及图片定位异常问题

src/components/general/cropper.vue

@@ -5,6 +5,7 @@
         <i class="el-icon-refresh-right img_replace"></i>
         <input
           type="file"
+          id="upItem1"
           class="up_input"
           accept="image/png, image/jpeg, image/gif, image/jpg"
           @change="uploadImg($event,1)"
@@ -21,6 +22,7 @@
         <i class="el-icon-plus add_icon"></i>
         <input
           type="file"
+          id="upItem2"
           class="up_input"
           accept="image/png, image/jpeg, image/gif, image/jpg"
           @change="uploadImg($event,1)"
@@ -49,6 +51,7 @@
               :autoCropWidth="options.autoCropWidth"
               :autoCropHeight="options.autoCropHeight"
               :centerBox="options.centerBox"
+              :mode="options.mode"
               @realTime="realTime"
             ></vueCropper>
           </div>
@@ -70,30 +73,30 @@
 import { VueCropper } from "vue-cropper";
 export default {
   components: {
-    VueCropper
+    VueCropper,
   },
   props: {
     fileArray: {
       type: Array,
       default: () => {
         [];
-      }
+      },
     },
     fit: {
       type: String,
-      default: ""
+      default: "",
     },
     max: {
       type: Number,
-      default: 1
-    }
+      default: 1,
+    },
   },
   watch: {
     fileArray: {
       handler(val) {
         this.fileArr = val;
-      }
-    }
+      },
+    },
   },
   data() {
     return {
@@ -104,7 +107,8 @@ export default {
         canMoveBox: true, //截图框不能拖动
         autoCropWidth: 200, //截图框宽度
         autoCropHeight: 200, //截图框高度
-        centerBox: false //截图框被限制在图片里面
+        centerBox: true, //截图框被限制在图片里面
+        mode: "cover",
       },
       previews: {}, //实时预览图数据
       attach: {
@@ -112,16 +116,24 @@ export default {
         userId: "",
         customaryUrl: "", //原图片路径
         laterUrl: "", //裁剪后图片路径
-        attachType: "photo" //附件类型
+        attachType: "photo", //附件类型
       },
       fileName: "", //本机文件地址
       uploadImgRelaPath: "", //上传后图片地址
-      fileArr: []
+      fileArr: [],
     };
   },
   methods: {
     //控制弹出层关闭
     handleClose() {
+      let abc1 = document.getElementById("upItem1");
+      let abc2 = document.getElementById("upItem2");
+      if (abc1) {
+        abc1.value = "";
+      }
+      if (abc2) {
+        abc2.value = "";
+      }
       this.dialogVisible = false;
     },
     //实时预览
@@ -143,7 +155,7 @@ export default {
       //fileReader 接口，用于异步读取文件数据
       var reader = new FileReader();
       reader.readAsDataURL(file); //重要 以dataURL形式读取文件
-      reader.onload = e => {
+      reader.onload = (e) => {
         // data = window.URL.createObjectURL(new Blob([e.target.result])) 转化为blob格式
 
         let data = e.target.result;
@@ -158,24 +170,24 @@ export default {
     //确认截图,上传
     cut(type) {
       var formData = new FormData();
-      this.$refs.cropper.getCropBlob(res => {
+      this.$refs.cropper.getCropBlob((res) => {
         //res是裁剪后图片的bolb对象
         formData.append("file", res, this.userId);
         formData.append("directory", "image");
         let url = "/apaas/static/image/upload";
         this.$http
           .post(url, formData, {
-            headers: { "Content-Type": "multipart/form-data" }
+            headers: { "Content-Type": "multipart/form-data" },
           })
-          .then(res => {
+          .then((res) => {
             this.fileArr = [{ name: res.data.data, url: res.data.data }];
             // 上传图片后服务器返回访问路径
             this.$emit("getNewUrl", res.data.data);
             this.handleClose();
           });
       });
-    }
-  }
+    },
+  },
 };
 </script>