| | |
| | | <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 |
| | |
| | | autoCrop: true, // 是否默认生成截图框 |
| | | autoCropWidth: 200, // 默认生成截图框宽度 |
| | | autoCropHeight: 200, // 默认生成截图框高度 |
| | | fixedBox: true // 固定截图框大小 不允许改变 |
| | | fixedBox: true, // 固定截图框大小 不允许改变 |
| | | filename: '' |
| | | }, |
| | | previews: {} |
| | | }; |
| | |
| | | // 上传预处理 |
| | | 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); |
| | | reader.onload = () => { |
| | | this.options.img = reader.result; |
| | | this.options.filename = file.name; |
| | | }; |
| | | } |
| | | }, |
| | |
| | | uploadImg() { |
| | | this.$refs.cropper.getCropBlob(data => { |
| | | let formData = new FormData(); |
| | | formData.append("avatarfile", data); |
| | | console.log(this.options.filename) |
| | | formData.append("avatarfile", data, this.options.filename); |
| | | uploadAvatar(formData).then(response => { |
| | | 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; |
| | | } |
| | | } |
| | | }; |