| 提交 | 用户 | 时间 | ||
| a57dc2 | 1 | <template> |
| W | 2 | <div> |
| 3 | <div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="点击上传头像" class="img-circle img-lg" /></div> | |
| 4 | <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog"> | |
| 5 | <el-row> | |
| 6 | <el-col :xs="24" :md="12" :style="{height: '350px'}"> | |
| 7 | <vue-cropper | |
| 8 | ref="cropper" | |
| 9 | :img="options.img" | |
| 10 | :info="true" | |
| 11 | :autoCrop="options.autoCrop" | |
| 12 | :autoCropWidth="options.autoCropWidth" | |
| 13 | :autoCropHeight="options.autoCropHeight" | |
| 14 | :fixedBox="options.fixedBox" | |
| 15 | :outputType="options.outputType" | |
| 16 | @realTime="realTime" | |
| 17 | v-if="visible" | |
| 18 | /> | |
| 19 | </el-col> | |
| 20 | <el-col :xs="24" :md="12" :style="{height: '350px'}"> | |
| 21 | <div class="avatar-upload-preview"> | |
| 22 | <img :src="previews.url" :style="previews.img" /> | |
| 23 | </div> | |
| 24 | </el-col> | |
| 25 | </el-row> | |
| 26 | <br /> | |
| 27 | <el-row> | |
| 28 | <el-col :lg="2" :sm="3" :xs="3"> | |
| 29 | <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload"> | |
| 30 | <el-button size="small"> | |
| 31 | 选择 | |
| 32 | <i class="el-icon-upload el-icon--right"></i> | |
| 33 | </el-button> | |
| 34 | </el-upload> | |
| 35 | </el-col> | |
| 36 | <el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2"> | |
| 37 | <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button> | |
| 38 | </el-col> | |
| 39 | <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2"> | |
| 40 | <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button> | |
| 41 | </el-col> | |
| 42 | <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2"> | |
| 43 | <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button> | |
| 44 | </el-col> | |
| 45 | <el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2"> | |
| 46 | <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button> | |
| 47 | </el-col> | |
| 48 | <el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2"> | |
| 49 | <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button> | |
| 50 | </el-col> | |
| 51 | </el-row> | |
| 52 | </el-dialog> | |
| 53 | </div> | |
| 54 | </template> | |
| 55 | ||
| 56 | <script> | |
| 57 | import store from "@/store"; | |
| 58 | import { VueCropper } from "vue-cropper"; | |
| 59 | import { uploadAvatar } from "@/api/system/user"; | |
| 60 | import { debounce } from '@/utils' | |
| 61 | ||
| 62 | export default { | |
| 63 | components: { VueCropper }, | |
| 64 | props: { | |
| 65 | user: { | |
| 66 | type: Object | |
| 67 | } | |
| 68 | }, | |
| 69 | data() { | |
| 70 | return { | |
| 71 | // 是否显示弹出层 | |
| 72 | open: false, | |
| 73 | // 是否显示cropper | |
| 74 | visible: false, | |
| 75 | // 弹出层标题 | |
| 76 | title: "修改头像", | |
| 77 | options: { | |
| 78 | img: store.getters.avatar, //裁剪图片的地址 | |
| 79 | autoCrop: true, // 是否默认生成截图框 | |
| 80 | autoCropWidth: 200, // 默认生成截图框宽度 | |
| 81 | autoCropHeight: 200, // 默认生成截图框高度 | |
| 82 | fixedBox: true, // 固定截图框大小 不允许改变 | |
| 83 | outputType:"png", // 默认生成截图为PNG格式 | |
| 84 | filename: '' | |
| 85 | }, | |
| 86 | previews: {}, | |
| 87 | resizeHandler: null | |
| 88 | }; | |
| 89 | }, | |
| 90 | methods: { | |
| 91 | // 编辑头像 | |
| 92 | editCropper() { | |
| 93 | this.open = true; | |
| 94 | }, | |
| 95 | // 打开弹出层结束时的回调 | |
| 96 | modalOpened() { | |
| 97 | this.visible = true; | |
| 98 | if (!this.resizeHandler) { | |
| 99 | this.resizeHandler = debounce(() => { | |
| 100 | this.refresh() | |
| 101 | }, 100) | |
| 102 | } | |
| 103 | window.addEventListener("resize", this.resizeHandler) | |
| 104 | }, | |
| 105 | // 刷新组件 | |
| 106 | refresh() { | |
| 107 | this.$refs.cropper.refresh(); | |
| 108 | }, | |
| 109 | // 覆盖默认的上传行为 | |
| 110 | requestUpload() { | |
| 111 | }, | |
| 112 | // 向左旋转 | |
| 113 | rotateLeft() { | |
| 114 | this.$refs.cropper.rotateLeft(); | |
| 115 | }, | |
| 116 | // 向右旋转 | |
| 117 | rotateRight() { | |
| 118 | this.$refs.cropper.rotateRight(); | |
| 119 | }, | |
| 120 | // 图片缩放 | |
| 121 | changeScale(num) { | |
| 122 | num = num || 1; | |
| 123 | this.$refs.cropper.changeScale(num); | |
| 124 | }, | |
| 125 | // 上传预处理 | |
| 126 | beforeUpload(file) { | |
| 127 | if (file.type.indexOf("image/") == -1) { | |
| 128 | this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。"); | |
| 129 | } else { | |
| 130 | const reader = new FileReader(); | |
| 131 | reader.readAsDataURL(file); | |
| 132 | reader.onload = () => { | |
| 133 | this.options.img = reader.result; | |
| 134 | this.options.filename = file.name; | |
| 135 | }; | |
| 136 | } | |
| 137 | }, | |
| 138 | // 上传图片 | |
| 139 | uploadImg() { | |
| 140 | this.$refs.cropper.getCropBlob(data => { | |
| 141 | let formData = new FormData(); | |
| 142 | console.log(this.options.filename) | |
| 143 | formData.append("avatarfile", data, this.options.filename); | |
| 144 | uploadAvatar(formData).then(response => { | |
| 145 | this.open = false; | |
| 146 | this.options.img = response.data.imgUrl; | |
| 147 | store.commit('SET_AVATAR', this.options.img); | |
| 148 | this.$modal.msgSuccess("修改成功"); | |
| 149 | this.visible = false; | |
| 150 | }); | |
| 151 | }); | |
| 152 | }, | |
| 153 | // 实时预览 | |
| 154 | realTime(data) { | |
| 155 | this.previews = data; | |
| 156 | }, | |
| 157 | // 关闭窗口 | |
| 158 | closeDialog() { | |
| 159 | this.options.img = store.getters.avatar | |
| 160 | this.visible = false; | |
| 161 | window.removeEventListener("resize", this.resizeHandler) | |
| 162 | } | |
| 163 | } | |
| 164 | }; | |
| 165 | </script> | |
| 166 | <style scoped lang="scss"> | |
| 167 | .user-info-head { | |
| 168 | position: relative; | |
| 169 | display: inline-block; | |
| 170 | height: 120px; | |
| 171 | } | |
| 172 | ||
| 173 | .user-info-head:hover:after { | |
| 174 | content: '+'; | |
| 175 | position: absolute; | |
| 176 | left: 0; | |
| 177 | right: 0; | |
| 178 | top: 0; | |
| 179 | bottom: 0; | |
| 180 | color: #eee; | |
| 181 | background: rgba(0, 0, 0, 0.5); | |
| 182 | font-size: 24px; | |
| 183 | font-style: normal; | |
| 184 | -webkit-font-smoothing: antialiased; | |
| 185 | -moz-osx-font-smoothing: grayscale; | |
| 186 | cursor: pointer; | |
| 187 | line-height: 110px; | |
| 188 | border-radius: 50%; | |
| 189 | } | |
| 190 | </style> | |
