| | |
| | | <template> |
| | | <div> |
| | | <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div> |
| | | <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog()"> |
| | | <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog"> |
| | | <el-row> |
| | | <el-col :xs="24" :md="12" :style="{height: '350px'}"> |
| | | <vue-cropper |
| | |
| | | :autoCropWidth="options.autoCropWidth" |
| | | :autoCropHeight="options.autoCropHeight" |
| | | :fixedBox="options.fixedBox" |
| | | :outputType="options.outputType" |
| | | @realTime="realTime" |
| | | v-if="visible" |
| | | /> |
| | |
| | | </el-row> |
| | | <br /> |
| | | <el-row> |
| | | <el-col :lg="2" :md="2"> |
| | | <el-col :lg="2" :sm="3" :xs="3"> |
| | | <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload"> |
| | | <el-button size="small"> |
| | | 选择 |
| | |
| | | </el-button> |
| | | </el-upload> |
| | | </el-col> |
| | | <el-col :lg="{span: 1, offset: 2}" :md="2"> |
| | | <el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2"> |
| | | <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button> |
| | | </el-col> |
| | | <el-col :lg="{span: 1, offset: 1}" :md="2"> |
| | | <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2"> |
| | | <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button> |
| | | </el-col> |
| | | <el-col :lg="{span: 1, offset: 1}" :md="2"> |
| | | <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2"> |
| | | <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button> |
| | | </el-col> |
| | | <el-col :lg="{span: 1, offset: 1}" :md="2"> |
| | | <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2"> |
| | | <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button> |
| | | </el-col> |
| | | <el-col :lg="{span: 2, offset: 6}" :md="2"> |
| | | <el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2"> |
| | | <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | import store from "@/store"; |
| | | import { VueCropper } from "vue-cropper"; |
| | | import { uploadAvatar } from "@/api/system/user"; |
| | | import { debounce } from '@/utils' |
| | | |
| | | export default { |
| | | components: { VueCropper }, |
| | |
| | | autoCropWidth: 200, // 默认生成截图框宽度 |
| | | autoCropHeight: 200, // 默认生成截图框高度 |
| | | fixedBox: true, // 固定截图框大小 不允许改变 |
| | | outputType:"png", // 默认生成截图为PNG格式 |
| | | filename: '' |
| | | }, |
| | | previews: {} |
| | | previews: {}, |
| | | resizeHandler: null |
| | | }; |
| | | }, |
| | | methods: { |
| | |
| | | // 打开弹出层结束时的回调 |
| | | modalOpened() { |
| | | this.visible = true; |
| | | if (!this.resizeHandler) { |
| | | this.resizeHandler = debounce(() => { |
| | | this.refresh() |
| | | }, 100) |
| | | } |
| | | window.addEventListener("resize", this.resizeHandler) |
| | | }, |
| | | // 刷新组件 |
| | | refresh() { |
| | | this.$refs.cropper.refresh(); |
| | | }, |
| | | // 覆盖默认的上传行为 |
| | | requestUpload() { |
| | |
| | | // 上传预处理 |
| | | beforeUpload(file) { |
| | | if (file.type.indexOf("image/") == -1) { |
| | | this.msgError("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。"); |
| | | this.$modal.msgError("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。"); |
| | | } else { |
| | | const reader = new FileReader(); |
| | | reader.readAsDataURL(file); |
| | |
| | | this.open = false; |
| | | this.options.img = response.data.imgUrl; |
| | | store.commit('SET_AVATAR', this.options.img); |
| | | this.msgSuccess("修改成功"); |
| | | this.$modal.msgSuccess("修改成功"); |
| | | this.visible = false; |
| | | }); |
| | | }); |
| | |
| | | // 关闭窗口 |
| | | closeDialog() { |
| | | this.options.img = store.getters.avatar |
| | | this.visible = false; |
| | | this.visible = false; |
| | | window.removeEventListener("resize", this.resizeHandler) |
| | | } |
| | | } |
| | | }; |