{"version":3,"sources":["webpack:///./src/pages/user/components/UploadAvatar.vue","webpack:///src/pages/user/components/UploadAvatar.vue","webpack:///./src/pages/user/components/UploadAvatar.vue?b61e","webpack:///./src/pages/user/components/UploadAvatar.vue?e035","webpack:///./src/pages/user/components/UploadAvatar.vue?414e"],"names":["render","_vm","this","_c","_self","staticClass","attrs","uploadAvatar","beforeUpload","handleChange","_v","ref","type","uploadFileName","on","refresh","uploadOssFile","staticRenderFns","inject","components","ImageCropper","props","avatar","value","data","mixins","methods","cropper","img","outputSize","outputType","info","canScale","autoCrop","autoCropWidth","autoCropHeight","fixedNumber","fixedBox","fixed","canMove","canMoveBox","original","centerBox","infoTrue","full","enlarge","mode","success","that","component"],"mappings":"uHAAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACA,EAAG,YAAY,CAACE,YAAY,kBAAkBC,MAAM,CAAC,OAAS,IAAI,kBAAiB,EAAM,MAAQ,EAAE,eAAeL,EAAIM,aAAa,gBAAgBN,EAAIO,aAAa,YAAYP,EAAIQ,eAAe,CAACN,EAAG,MAAM,CAACE,YAAY,UAAU,CAACJ,EAAIS,GAAG,UAAUP,EAAG,eAAe,CAACQ,IAAI,YAAYL,MAAM,CAAC,KAAOL,EAAIW,KAAK,eAAiBX,EAAIY,gBAAgBC,GAAG,CAAC,MAAQb,EAAIc,QAAQ,cAAgBd,EAAIe,kBAAkB,IAE5dC,EAAkB,G,YCmBP,GACfC,kBACAC,YACAC,8DAGAC,OACAC,QACAV,YACAW,WAGAC,OACA,OACAZ,wBACAC,oBAGAY,gBACAC,SACAX,UACA,eAGAN,gBACA,yDAIAkB,UACA,gCACAC,iCACAC,cACAC,iBACAC,QACAC,YACAC,YACAC,gBACAC,iBACAC,kBACAC,YACAC,SACAC,WACAC,cACAC,YACAC,aACAC,YACAC,QACAC,YACAC,eACAC,YACA,oBACA,6CAKAxC,gBACA,gCACA,gBAGAS,iBACA,WACAgC,kCACA,cACAA,4CACAA,mCACAA,yBCzFoX,I,wBCQhXC,EAAY,eACd,EACAjD,EACAiB,GACA,EACA,KACA,KACA,MAIa,aAAAgC,E,sECnBf","file":"static/js/UploadAvatar.51895838.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',[_c('el-upload',{staticClass:\"avatar-uploader\",attrs:{\"action\":\"#\",\"show-file-list\":false,\"limit\":1,\"http-request\":_vm.uploadAvatar,\"before-upload\":_vm.beforeUpload,\"on-change\":_vm.handleChange}},[_c('div',{staticClass:\"btnBox\"},[_vm._v(\"修改\")])]),_c('ImageCropper',{ref:\"iscropper\",attrs:{\"type\":_vm.type,\"uploadFileName\":_vm.uploadFileName},on:{\"close\":_vm.refresh,\"uploadOssFile\":_vm.uploadOssFile}})],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n    <div>\r\n        <el-upload class=\"avatar-uploader\" action=\"#\" :show-file-list=\"false\" :limit=\"1\" :http-request=\"uploadAvatar\"\r\n            :before-upload=\"beforeUpload\" :on-change=\"handleChange\">\r\n            <!-- <div class=\"image\"> -->\r\n            <!-- <el-avatar shape=\"square\" :size=\"100\" fit=\"cover\" :src=\"avatar\"></el-avatar> -->\r\n            <!-- <img src=\"@/assets/user/edit.png\" alt=\"\"> -->\r\n            <!-- <div class=\"modal\">修改</div> -->\r\n            <!-- 修改 -->\r\n            <!-- </div> -->\r\n            <div class=\"btnBox\">修改</div>\r\n        </el-upload>\r\n        <ImageCropper ref=\"iscropper\" :type=\"type\" :uploadFileName=\"uploadFileName\" @close=\"refresh\"\r\n            @uploadOssFile=\"uploadOssFile\">\r\n        </ImageCropper>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport { beforeUploadMixin } from '@/mixins/BeforeUploadImageMixin';\r\n\r\nexport default {\r\n    inject: [\"reload\"],\r\n    components: {\r\n        ImageCropper: () => import(/* webpackChunkName: \"UploadAvatar\" */ '@/components/ImageCropper.vue')\r\n\r\n    },\r\n    props: {\r\n        avatar: {\r\n            type: String,\r\n            value: ''\r\n        }\r\n    },\r\n    data() {\r\n        return {\r\n            type: 'avatarUnidentify',\r\n            uploadFileName: '',//上传图片的名字\r\n        }\r\n    },\r\n    mixins: [beforeUploadMixin],\r\n    methods: {\r\n        refresh() {\r\n            this.reload();\r\n        },\r\n        // 获取图片本地服务器路径\r\n        handleChange(file) {\r\n            this.loaclServerPathIdentifi = URL.createObjectURL(file.raw)\r\n        },\r\n\r\n        // 主体识别生成裁剪框\r\n        cropper() {\r\n            this.$refs.iscropper.showModal({\r\n                img: this.loaclServerPathIdentifi, // 裁剪图片的地址\r\n                outputSize: 0.8, // 裁剪生成图片的质量\r\n                outputType: 'png', // 裁剪生成图片的格式\r\n                info: true, // 裁剪框的大小信息\r\n                canScale: false, // 图片是否允许滚轮缩放\r\n                autoCrop: true, // 是否默认生成截图框\r\n                autoCropWidth: 0, // 默认生成截图框宽度\r\n                autoCropHeight: 0, // 默认生成截图框高度\r\n                fixedNumber: [1, 1], // 截图框的宽高比例\r\n                fixedBox: false, // 固定截图框大小 不允许改变 \r\n                fixed: false, // 是否开启截图框宽高固定比例\r\n                canMove: false, // 上传图片是否可以移动\r\n                canMoveBox: true, // 截图框能否拖动\r\n                original: false, // 上传图片按照原始比例渲染\r\n                centerBox: true, // 截图框是否被限制在图片里面\r\n                infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高\r\n                full: true, // 是否输出原图比例的截图\r\n                enlarge: '1', // 图片根据截图框输出比例倍数\r\n                mode: 'contain', // 图片默认渲染方式\r\n                success: res => {\r\n                    this.unimgurl = res.img\r\n                    this.imageUrl = URL.createObjectURL(res.img)\r\n                }\r\n            })\r\n        },\r\n        //上传头像\r\n        uploadAvatar(params) {\r\n            this.uploadFileName = params.file.name\r\n            this.cropper()\r\n        },\r\n        // 上传头像接口\r\n        uploadOssFile(formdata) {\r\n            let that = this;\r\n            that.$http.uploadOssFile(formdata).then(res => {\r\n                if (res.code == 200) {\r\n                    that.$store.commit('saveUserAvatarUrl', res.data)\r\n                    that.$common.message(res.msg, 'success')\r\n                    that.$emit('refresh')\r\n                }\r\n            })\r\n        }\r\n    }\r\n}\r\n</script>\r\n\r\n<style lang=\"less\">\r\n.avatar-uploader {\r\n    // width: 100px;\r\n\r\n    .el-avatar {\r\n        border-radius: 50%;\r\n\r\n        img {\r\n            width: 100%;\r\n        }\r\n    }\r\n\r\n    .btnBox {\r\n        height: 40px;\r\n        width: 120px;\r\n        // margin-left: 40px;\r\n        background: linear-gradient(101deg, #006EF2 0%, #33A6F9 100%);\r\n        display: block;\r\n        color: #fff;\r\n        text-align: center;\r\n        line-height: 40px;\r\n        border-radius: 20px;\r\n        cursor: pointer;\r\n    }\r\n\r\n    .image {\r\n        // height: 40px;\r\n        // width: 120px;\r\n        // // margin-left: 40px;\r\n        // background: linear-gradient(101deg, #006EF2 0%, #33A6F9 100%);\r\n        // display: block;\r\n        // color: #fff;\r\n        // text-align: center;\r\n        // line-height: 40px;\r\n        // border-radius: 20px;\r\n        // cursor: pointer;\r\n        // width: 80px;\r\n        // height: 100px;\r\n        position: relative;\r\n\r\n        .modal {\r\n            height: 40px;\r\n            width: 120px;\r\n            // margin-left: 40px;\r\n            background: linear-gradient(101deg, #006EF2 0%, #33A6F9 100%);\r\n            display: block;\r\n            color: #fff;\r\n            text-align: center;\r\n            line-height: 40px;\r\n            border-radius: 20px;\r\n            cursor: pointer;\r\n        }\r\n    }\r\n}\r\n</style>","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UploadAvatar.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UploadAvatar.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./UploadAvatar.vue?vue&type=template&id=4ac19f98&\"\nimport script from \"./UploadAvatar.vue?vue&type=script&lang=js&\"\nexport * from \"./UploadAvatar.vue?vue&type=script&lang=js&\"\nimport style0 from \"./UploadAvatar.vue?vue&type=style&index=0&id=4ac19f98&prod&lang=less&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../../../node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!../../../../node_modules/style-resources-loader/lib/index.js??ref--11-oneOf-1-4!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./UploadAvatar.vue?vue&type=style&index=0&id=4ac19f98&prod&lang=less&\""],"sourceRoot":""}