{"remainingRequest":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\components\\cropperImg\\index.vue?vue&type=script&lang=js","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\components\\cropperImg\\index.vue","mtime":1761185179957},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\babel-loader\\lib\\index.js","mtime":456789000000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQppbXBvcnQgeyBWdWVDcm9wcGVyIH0gZnJvbSAndnVlLWNyb3BwZXInOw0KLy8gaW1wb3J0IHsgdXBkYXRlQXZhdGFyIH0gZnJvbSAnJzsgLy/ov5nph4zkuLrmlofku7bkuIrkvKDnmoTmjqXlj6PmjaLmiJDoh6rlt7HnmoTmlofku7YNCmltcG9ydCB7IGZpbGVVcGxvYWQgfSBmcm9tICdAL2FwaS9zZXR0aW5nJzsNCmV4cG9ydCBkZWZhdWx0IHsNCiAgbmFtZTogJ0Nyb3BwZXJJbWFnZScsDQogIGNvbXBvbmVudHM6IHsNCiAgICBWdWVDcm9wcGVyLA0KICB9LA0KICBkYXRhKCkgew0KICAgIHJldHVybiB7DQogICAgICBuYW1lOiAnJywNCiAgICAgIHJlc0ltZzogJycsDQogICAgICBwcmV2aWV3czoge30sDQogICAgICBvcHRpb246IHsNCiAgICAgICAgaW1nOiAnJywgLy/oo4Hliarlm77niYfnmoTlnLDlnYANCiAgICAgICAgb3V0cHV0U2l6ZTogMSwgLy/oo4HliarnlJ/miJDlm77niYfnmoTotKjph48o5Y+v6YCJMC4xIC0gMSkNCiAgICAgICAgb3V0cHV0VHlwZTogJ3BuZycsIC8v6KOB5Ymq55Sf5oiQ5Zu+54mH55qE5qC85byP77yIanBlZyB8fCBwbmcgfHwgd2VicO+8iQ0KICAgICAgICBpbmZvOiB0cnVlLCAvL+WbvueJh+Wkp+Wwj+S/oeaBrw0KICAgICAgICBjYW5TY2FsZTogdHJ1ZSwgLy/lm77niYfmmK/lkKblhYHorrjmu5rova7nvKnmlL4NCiAgICAgICAgYXV0b0Nyb3A6IHRydWUsIC8v5piv5ZCm6buY6K6k55Sf5oiQ5oiq5Zu+5qGGDQogICAgICAgIGF1dG9Dcm9wV2lkdGg6IDIwMCwgLy/pu5jorqTnlJ/miJDmiKrlm77moYblrr3luqYNCiAgICAgICAgYXV0b0Nyb3BIZWlnaHQ6IDIwMCwgLy/pu5jorqTnlJ/miJDmiKrlm77moYbpq5jluqYNCiAgICAgICAgZml4ZWQ6IHRydWUsIC8v5piv5ZCm5byA5ZCv5oiq5Zu+5qGG5a696auY5Zu65a6a5q+U5L6LDQogICAgICAgIGZpeGVkTnVtYmVyOiBbMSwgMV0sIC8v5oiq5Zu+5qGG55qE5a696auY5q+U5L6LDQogICAgICAgIGZ1bGw6IGZhbHNlLCAvL2ZhbHNl5oyJ5Y6f5q+U5L6L6KOB5YiH5Zu+54mH77yM5LiN5aSx55yfDQogICAgICAgIGZpeGVkQm94OiBmYWxzZSwgLy/lm7rlrprmiKrlm77moYblpKflsI/vvIzkuI3lhYHorrjmlLnlj5gNCiAgICAgICAgY2FuTW92ZTogdHJ1ZSwgLy/kuIrkvKDlm77niYfmmK/lkKblj6/ku6Xnp7vliqgNCiAgICAgICAgY2FuTW92ZUJveDogdHJ1ZSwgLy/miKrlm77moYbog73lkKbmi5bliqgNCiAgICAgICAgb3JpZ2luYWw6IGZhbHNlLCAvL+S4iuS8oOWbvueJh+aMieeFp+WOn+Wni+avlOS+i+a4suafkw0KICAgICAgICBjZW50ZXJCb3g6IHRydWUsIC8v5oiq5Zu+5qGG5piv5ZCm6KKr6ZmQ5Yi25Zyo5Zu+54mH6YeM6Z2iDQogICAgICAgIGhlaWdodDogZmFsc2UsIC8v5piv5ZCm5oyJ54Wn6K6+5aSH55qEZHByIOi+k+WHuuetieavlOS+i+WbvueJhw0KICAgICAgICBpbmZvVHJ1ZTogZmFsc2UsIC8vdHJ1ZeS4uuWxleekuuecn+Wunui+k+WHuuWbvueJh+WuvemrmO+8jGZhbHNl5bGV56S655yL5Yiw55qE5oiq5Zu+5qGG5a696auYDQogICAgICAgIG1heEltZ1NpemU6IDMwMDAsIC8v6ZmQ5Yi25Zu+54mH5pyA5aSn5a695bqm5ZKM6auY5bqmDQogICAgICAgIGVubGFyZ2U6IDEsIC8v5Zu+54mH5qC55o2u5oiq5Zu+5qGG6L6T5Ye65q+U5L6L5YCN5pWwDQogICAgICAgIG1vZGU6ICczMDBweCAzMDBweCcsIC8v5Zu+54mH6buY6K6k5riy5p+T5pa55byPDQogICAgICB9LA0KICAgIH07DQogIH0sDQogIG1ldGhvZHM6IHsNCiAgICAvL+WIneWni+WMluWHveaVsA0KICAgIGltZ0xvYWQobXNnKSB7DQogICAgICBjb25zb2xlLmxvZygn5bel5YW35Yid5aeL5YyW5Ye95pWwPT09PT0nICsgbXNnKTsNCiAgICB9LA0KICAgIC8v5Zu+54mH57yp5pS+DQogICAgY2hhbmdlU2NhbGUobnVtKSB7DQogICAgICBudW0gPSBudW0gfHwgMTsNCiAgICAgIHRoaXMuJHJlZnMuY3JvcHBlci5jaGFuZ2VTY2FsZShudW0pOw0KICAgIH0sDQogICAgLy/lkJHlt6bml4vovawNCiAgICByb3RhdGVMZWZ0KCkgew0KICAgICAgdGhpcy4kcmVmcy5jcm9wcGVyLnJvdGF0ZUxlZnQoKTsNCiAgICB9LA0KICAgIC8v5ZCR5Y+z5peL6L2sDQogICAgcm90YXRlUmlnaHQoKSB7DQogICAgICB0aGlzLiRyZWZzLmNyb3BwZXIucm90YXRlUmlnaHQoKTsNCiAgICB9LA0KICAgIC8vIC8v5a6e5pe26aKE6KeI5Ye95pWwDQogICAgcmVhbFRpbWUoZGF0YSkgew0KICAgICAgbGV0IHRoYXQgPSB0aGlzOw0KICAgICAgdGhhdC5wcmV2aWV3cyA9IGRhdGE7DQogICAgICB0aGlzLiRyZWZzLmNyb3BwZXIuZ2V0Q3JvcEJsb2IoKGRhdGEpID0+IHsNCiAgICAgICAgdGhpcy5ibG9iVG9EYXRhVVJJKGRhdGEsIGZ1bmN0aW9uIChyZXMpIHsNCiAgICAgICAgICB0aGF0LnByZXZpZXdJbWcgPSByZXM7DQogICAgICAgIH0pOw0KICAgICAgfSk7DQogICAgfSwNCiAgICBibG9iVG9EYXRhVVJJKGJsb2IsIGNhbGxiYWNrKSB7DQogICAgICB2YXIgcmVhZGVyID0gbmV3IEZpbGVSZWFkZXIoKTsNCiAgICAgIHJlYWRlci5yZWFkQXNEYXRhVVJMKGJsb2IpOw0KICAgICAgcmVhZGVyLm9ubG9hZCA9IGZ1bmN0aW9uIChlKSB7DQogICAgICAgIGNhbGxiYWNrKGUudGFyZ2V0LnJlc3VsdCk7DQogICAgICB9Ow0KICAgIH0sDQogICAgLy/pgInmi6nlm77niYcNCiAgICBzZWxlY3RJbWcoZSkgew0KICAgICAgbGV0IGZpbGUgPSBlLnRhcmdldC5maWxlc1swXTsNCiAgICAgIGlmICghL1wuKGpwZ3xqcGVnfHBuZ3xKUEd8UE5HKSQvLnRlc3QoZS50YXJnZXQudmFsdWUpKSB7DQogICAgICAgIHRoaXMuJG1lc3NhZ2Uoew0KICAgICAgICAgIG1lc3NhZ2U6ICflm77niYfnsbvlnovopoHmsYLvvJpqcGVn44CBanBn44CBcG5nJywNCiAgICAgICAgICB0eXBlOiAnZXJyb3InLA0KICAgICAgICB9KTsNCiAgICAgICAgcmV0dXJuIGZhbHNlOw0KICAgICAgfQ0KICAgICAgLy/ovazljJbkuLpibG9iDQogICAgICBsZXQgcmVhZGVyID0gbmV3IEZpbGVSZWFkZXIoKTsNCiAgICAgIHJlYWRlci5vbmxvYWQgPSAoZSkgPT4gew0KICAgICAgICBsZXQgZGF0YTsNCiAgICAgICAgaWYgKHR5cGVvZiBlLnRhcmdldC5yZXN1bHQgPT09ICdvYmplY3QnKSB7DQogICAgICAgICAgZGF0YSA9IHdpbmRvdy5VUkwuY3JlYXRlT2JqZWN0VVJMKG5ldyBCbG9iKFtlLnRhcmdldC5yZXN1bHRdKSk7DQogICAgICAgIH0gZWxzZSB7DQogICAgICAgICAgZGF0YSA9IGUudGFyZ2V0LnJlc3VsdDsNCiAgICAgICAgfQ0KICAgICAgICB0aGlzLm9wdGlvbi5pbWcgPSBkYXRhOw0KICAgICAgfTsNCiAgICAgIC8v6L2s5YyW5Li6YmFzZTY0DQogICAgICByZWFkZXIucmVhZEFzRGF0YVVSTChmaWxlKTsNCiAgICB9LA0KDQogICAgYmFzZTY0SW1ndG9GaWxlKGRhdGF1cmwsIGZpbGVuYW1lID0gJ2ZpbGUnKSB7DQogICAgICAvL+WwhmJhc2U2NOagvOW8j+WIhuWJsu+8mlsnZGF0YTppbWFnZS9wbmc7YmFzZTY0JywnWFhYWCddDQogICAgICBjb25zdCBhcnIgPSBkYXRhdXJsLnNwbGl0KCcsJyk7DQogICAgICAvLyAuKu+8nyDooajnpLrljLnphY3ku7vmhI/lrZfnrKbliLDkuIvkuIDkuKrnrKblkIjmnaHku7bnmoTlrZfnrKYg5Yia5aW95Yy56YWN5Yiw77yaDQogICAgICAvLyBpbWFnZS9wbmcNCiAgICAgIGNvbnN0IG1pbWUgPSBhcnJbMF0ubWF0Y2goLzooLio/KTsvKVsxXTsgLy9pbWFnZS9wbmcNCiAgICAgIC8vW2ltYWdlLHBuZ10g6I635Y+W5Zu+54mH57G75Z6L5ZCO57yADQogICAgICBjb25zdCBzdWZmaXggPSBtaW1lLnNwbGl0KCcvJylbMV07IC8vcG5nDQogICAgICBjb25zdCBic3RyID0gYXRvYihhcnJbMV0pOyAvL2F0b2IoKSDmlrnms5XnlKjkuo7op6PnoIHkvb/nlKggYmFzZS02NCDnvJbnoIHnmoTlrZfnrKbkuLINCiAgICAgIGxldCBuID0gYnN0ci5sZW5ndGg7DQogICAgICBjb25zdCB1OGFyciA9IG5ldyBVaW50OEFycmF5KG4pOw0KICAgICAgd2hpbGUgKG4tLSkgew0KICAgICAgICB1OGFycltuXSA9IGJzdHIuY2hhckNvZGVBdChuKTsNCiAgICAgIH0NCiAgICAgIHJldHVybiBuZXcgRmlsZShbdThhcnJdLCBgJHtmaWxlbmFtZX0uJHtzdWZmaXh9YCwgew0KICAgICAgICB0eXBlOiBtaW1lLA0KICAgICAgfSk7DQogICAgfSwNCg0KICAgIHVwbG9hZEZpbGUoZmlsZSkgew0KICAgICAgY29uc3QgZm9ybURhdGEgPSBuZXcgRm9ybURhdGEoKTsNCiAgICAgIGZvcm1EYXRhLmFwcGVuZCgnZmlsZScsIGZpbGUpOw0KICAgICAgZmlsZVVwbG9hZChmb3JtRGF0YSkudGhlbigocmVzKSA9PiB7DQogICAgICAgIGlmIChyZXMuc3RhdHVzID09IDIwMCkgew0KICAgICAgICAgIHRoaXMuJGVtaXQoJ3VwbG9hZEltZ1N1Y2Nlc3MnLCByZXMuZGF0YSk7DQogICAgICAgIH0gZWxzZSB7DQogICAgICAgICAgdGhpcy4kbWVzc2FnZSh7DQogICAgICAgICAgICBtZXNzYWdlOiAn5LiK5Lyg5aSx6LSlJywNCiAgICAgICAgICAgIHR5cGU6ICdlcnJvcicsDQogICAgICAgICAgICBkdXJhdGlvbjogMTAwMCwNCiAgICAgICAgICB9KTsNCiAgICAgICAgfQ0KICAgICAgfSk7DQogICAgfSwNCiAgICAvL+S4iuS8oOWbvueJhw0KICAgIHVwbG9hZEltZygpIHsNCiAgICAgIHRoaXMuJHJlZnMuY3JvcHBlci5nZXRDcm9wRGF0YSgoZGF0YSkgPT4gew0KICAgICAgICB0aGlzLnJlc0ltZyA9IHRoaXMuYmFzZTY0SW1ndG9GaWxlKGRhdGEpOw0KICAgICAgICB0aGlzLnVwbG9hZEZpbGUodGhpcy5yZXNJbWcpOw0KICAgICAgfSk7DQogICAgfSwNCiAgfSwNCn07DQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";AAmEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/components/cropperImg","sourcesContent":["<template>\r\n  <div class=\"cropper-content\">\r\n    <div class=\"cropper-box\">\r\n      <div class=\"cropper\">\r\n        <vue-cropper\r\n          ref=\"cropper\"\r\n          :img=\"option.img\"\r\n          :outputSize=\"option.outputSize\"\r\n          :outputType=\"option.outputType\"\r\n          :info=\"option.info\"\r\n          :canScale=\"option.canScale\"\r\n          :autoCrop=\"option.autoCrop\"\r\n          :autoCropWidth=\"option.autoCropWidth\"\r\n          :autoCropHeight=\"option.autoCropHeight\"\r\n          :fixed=\"option.fixed\"\r\n          :fixedNumber=\"option.fixedNumber\"\r\n          :full=\"option.full\"\r\n          :fixedBox=\"option.fixedBox\"\r\n          :canMove=\"option.canMove\"\r\n          :canMoveBox=\"option.canMoveBox\"\r\n          :original=\"option.original\"\r\n          :centerBox=\"option.centerBox\"\r\n          :height=\"option.height\"\r\n          :infoTrue=\"option.infoTrue\"\r\n          :maxImgSize=\"option.maxImgSize\"\r\n          :enlarge=\"option.enlarge\"\r\n          :mode=\"option.mode\"\r\n          @realTime=\"realTime\"\r\n          @imgLoad=\"imgLoad\"\r\n        >\r\n        </vue-cropper>\r\n      </div>\r\n      <!--底部操作工具按钮-->\r\n      <div class=\"footer-btn\">\r\n        <div class=\"scope-btn\">\r\n          <input\r\n            type=\"file\"\r\n            id=\"uploads\"\r\n            style=\"position: absolute; clip: rect(0 0 0 0)\"\r\n            accept=\"image/png, image/jpeg, image/gif, image/jpg\"\r\n            @change=\"selectImg($event)\"\r\n          />\r\n          <el-button size=\"mini\" type=\"danger\" plain icon=\"el-icon-zoom-in\" v-db-click @click=\"changeScale(1)\"\r\n            >放大</el-button\r\n          >\r\n          <el-button size=\"mini\" type=\"danger\" plain icon=\"el-icon-zoom-out\" v-db-click @click=\"changeScale(-1)\"\r\n            >缩小</el-button\r\n          >\r\n          <el-button size=\"mini\" type=\"danger\" plain v-db-click @click=\"rotateLeft\">↺ 左旋转</el-button>\r\n          <el-button size=\"mini\" type=\"danger\" plain v-db-click @click=\"rotateRight\">↻ 右旋转</el-button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!--预览效果图-->\r\n    <div class=\"show-preview\">\r\n      <div class=\"preview\">\r\n        <img :src=\"previews.url\" :style=\"previews.img\" />\r\n      </div>\r\n      <div class=\"upload-btn\">\r\n        <label class=\"btn\" for=\"uploads\">选择图片</label>\r\n        <el-button size=\"mini\" type=\"success\" v-db-click @click=\"uploadImg()\">确认上传</el-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { VueCropper } from 'vue-cropper';\r\n// import { updateAvatar } from ''; //这里为文件上传的接口换成自己的文件\r\nimport { fileUpload } from '@/api/setting';\r\nexport default {\r\n  name: 'CropperImage',\r\n  components: {\r\n    VueCropper,\r\n  },\r\n  data() {\r\n    return {\r\n      name: '',\r\n      resImg: '',\r\n      previews: {},\r\n      option: {\r\n        img: '', //裁剪图片的地址\r\n        outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)\r\n        outputType: 'png', //裁剪生成图片的格式（jpeg || png || webp）\r\n        info: true, //图片大小信息\r\n        canScale: true, //图片是否允许滚轮缩放\r\n        autoCrop: true, //是否默认生成截图框\r\n        autoCropWidth: 200, //默认生成截图框宽度\r\n        autoCropHeight: 200, //默认生成截图框高度\r\n        fixed: true, //是否开启截图框宽高固定比例\r\n        fixedNumber: [1, 1], //截图框的宽高比例\r\n        full: false, //false按原比例裁切图片，不失真\r\n        fixedBox: false, //固定截图框大小，不允许改变\r\n        canMove: true, //上传图片是否可以移动\r\n        canMoveBox: true, //截图框能否拖动\r\n        original: false, //上传图片按照原始比例渲染\r\n        centerBox: true, //截图框是否被限制在图片里面\r\n        height: false, //是否按照设备的dpr 输出等比例图片\r\n        infoTrue: false, //true为展示真实输出图片宽高，false展示看到的截图框宽高\r\n        maxImgSize: 3000, //限制图片最大宽度和高度\r\n        enlarge: 1, //图片根据截图框输出比例倍数\r\n        mode: '300px 300px', //图片默认渲染方式\r\n      },\r\n    };\r\n  },\r\n  methods: {\r\n    //初始化函数\r\n    imgLoad(msg) {\r\n      console.log('工具初始化函数=====' + msg);\r\n    },\r\n    //图片缩放\r\n    changeScale(num) {\r\n      num = num || 1;\r\n      this.$refs.cropper.changeScale(num);\r\n    },\r\n    //向左旋转\r\n    rotateLeft() {\r\n      this.$refs.cropper.rotateLeft();\r\n    },\r\n    //向右旋转\r\n    rotateRight() {\r\n      this.$refs.cropper.rotateRight();\r\n    },\r\n    // //实时预览函数\r\n    realTime(data) {\r\n      let that = this;\r\n      that.previews = data;\r\n      this.$refs.cropper.getCropBlob((data) => {\r\n        this.blobToDataURI(data, function (res) {\r\n          that.previewImg = res;\r\n        });\r\n      });\r\n    },\r\n    blobToDataURI(blob, callback) {\r\n      var reader = new FileReader();\r\n      reader.readAsDataURL(blob);\r\n      reader.onload = function (e) {\r\n        callback(e.target.result);\r\n      };\r\n    },\r\n    //选择图片\r\n    selectImg(e) {\r\n      let file = e.target.files[0];\r\n      if (!/\\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {\r\n        this.$message({\r\n          message: '图片类型要求：jpeg、jpg、png',\r\n          type: 'error',\r\n        });\r\n        return false;\r\n      }\r\n      //转化为blob\r\n      let reader = new FileReader();\r\n      reader.onload = (e) => {\r\n        let data;\r\n        if (typeof e.target.result === 'object') {\r\n          data = window.URL.createObjectURL(new Blob([e.target.result]));\r\n        } else {\r\n          data = e.target.result;\r\n        }\r\n        this.option.img = data;\r\n      };\r\n      //转化为base64\r\n      reader.readAsDataURL(file);\r\n    },\r\n\r\n    base64ImgtoFile(dataurl, filename = 'file') {\r\n      //将base64格式分割：['data:image/png;base64','XXXX']\r\n      const arr = dataurl.split(',');\r\n      // .*？ 表示匹配任意字符到下一个符合条件的字符 刚好匹配到：\r\n      // image/png\r\n      const mime = arr[0].match(/:(.*?);/)[1]; //image/png\r\n      //[image,png] 获取图片类型后缀\r\n      const suffix = mime.split('/')[1]; //png\r\n      const bstr = atob(arr[1]); //atob() 方法用于解码使用 base-64 编码的字符串\r\n      let n = bstr.length;\r\n      const u8arr = new Uint8Array(n);\r\n      while (n--) {\r\n        u8arr[n] = bstr.charCodeAt(n);\r\n      }\r\n      return new File([u8arr], `${filename}.${suffix}`, {\r\n        type: mime,\r\n      });\r\n    },\r\n\r\n    uploadFile(file) {\r\n      const formData = new FormData();\r\n      formData.append('file', file);\r\n      fileUpload(formData).then((res) => {\r\n        if (res.status == 200) {\r\n          this.$emit('uploadImgSuccess', res.data);\r\n        } else {\r\n          this.$message({\r\n            message: '上传失败',\r\n            type: 'error',\r\n            duration: 1000,\r\n          });\r\n        }\r\n      });\r\n    },\r\n    //上传图片\r\n    uploadImg() {\r\n      this.$refs.cropper.getCropData((data) => {\r\n        this.resImg = this.base64ImgtoFile(data);\r\n        this.uploadFile(this.resImg);\r\n      });\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n.btn {\r\n  outline: none;\r\n  display: inline-block;\r\n  line-height: 1;\r\n  white-space: nowrap;\r\n  cursor: pointer;\r\n  -webkit-appearance: none;\r\n  text-align: center;\r\n  -webkit-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n  outline: 0;\r\n  -webkit-transition: 0.1s;\r\n  transition: 0.1s;\r\n  font-weight: 500;\r\n  padding: 8px 15px;\r\n  font-size: 12px;\r\n  border-radius: 3px;\r\n  color: #fff;\r\n  background-color: #409eff;\r\n  border-color: #409eff;\r\n  margin-right: 10px;\r\n}\r\n.cropper-content {\r\n  display: flex;\r\n  display: -webkit-flex;\r\n  justify-content: flex-end;\r\n  .cropper-box {\r\n    flex: 1;\r\n    width: 100%;\r\n    .cropper {\r\n      width: auto;\r\n      height: 300px;\r\n    }\r\n  }\r\n\r\n  .show-preview {\r\n    flex: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: flex-start;\r\n    align-items: center;\r\n    .preview {\r\n      overflow: hidden;\r\n      height: 200px;\r\n      width: 200px;\r\n      background: #cccccc;\r\n      transform: scale(0.8);\r\n      border-radius: 50%;\r\n    }\r\n  }\r\n}\r\n.footer-btn {\r\n  margin-top: 30px;\r\n  display: flex;\r\n  display: -webkit-flex;\r\n  justify-content: space-around;\r\n  .scope-btn {\r\n    display: flex;\r\n    display: -webkit-flex;\r\n    justify-content: space-between;\r\n    padding-right: 10px;\r\n  }\r\n  .upload-btn {\r\n    flex: 1;\r\n    -webkit-flex: 1;\r\n    display: flex;\r\n    display: -webkit-flex;\r\n    justify-content: center;\r\n  }\r\n}\r\n</style>\r\n"]}]}