Jcdm041-Mes.git

懒羊羊

2024-01-17 5f7e70b8132d018614e8f4989d0614bd50cb7ecb

提交 \| 用户 \| 时间
fd2207	1	<template>
懒	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	data() {
	65	return {
	66	// 是否显示弹出层
	67	open: false,
	68	// 是否显示cropper
	69	visible: false,
	70	// 弹出层标题
	71	title: "修改头像",
	72	options: {
	73	img: store.getters.avatar, //裁剪图片的地址
	74	autoCrop: true, // 是否默认生成截图框
	75	autoCropWidth: 200, // 默认生成截图框宽度
	76	autoCropHeight: 200, // 默认生成截图框高度
	77	fixedBox: true, // 固定截图框大小不允许改变
	78	outputType:"png", // 默认生成截图为PNG格式
	79	filename: 'avatar' // 文件名称
	80	},
	81	previews: {},
	82	resizeHandler: null
	83	};
	84	},
	85	methods: {
	86	// 编辑头像
	87	editCropper() {
	88	this.open = true;
	89	},
	90	// 打开弹出层结束时的回调
	91	modalOpened() {
	92	this.visible = true;
	93	if (!this.resizeHandler) {
	94	this.resizeHandler = debounce(() => {
	95	this.refresh()
	96	}, 100)
	97	}
	98	window.addEventListener("resize", this.resizeHandler)
	99	},
	100	// 刷新组件
	101	refresh() {
	102	this.$refs.cropper.refresh();
	103	},
	104	// 覆盖默认的上传行为
	105	requestUpload() {
	106	},
	107	// 向左旋转
	108	rotateLeft() {
	109	this.$refs.cropper.rotateLeft();
	110	},
	111	// 向右旋转
	112	rotateRight() {
	113	this.$refs.cropper.rotateRight();
	114	},
	115	// 图片缩放
	116	changeScale(num) {
	117	num = num \|\| 1;
	118	this.$refs.cropper.changeScale(num);
	119	},
	120	// 上传预处理
	121	beforeUpload(file) {
	122	if (file.type.indexOf("image/") == -1) {
	123	this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
	124	} else {
	125	const reader = new FileReader();
	126	reader.readAsDataURL(file);
	127	reader.onload = () => {
	128	this.options.img = reader.result;
	129	this.options.filename = file.name;
	130	};
	131	}
	132	},
	133	// 上传图片
	134	uploadImg() {
	135	this.$refs.cropper.getCropBlob(data => {
	136	let formData = new FormData();
	137	formData.append("avatarfile", data, this.options.filename);
	138	uploadAvatar(formData).then(response => {
	139	this.open = false;
	140	this.options.img = process.env.VUE_APP_BASE_API + response.imgUrl;
	141	store.commit('SET_AVATAR', this.options.img);
	142	this.$modal.msgSuccess("修改成功");
	143	this.visible = false;
	144	});
	145	});
	146	},
	147	// 实时预览
	148	realTime(data) {
	149	this.previews = data;
	150	},
	151	// 关闭窗口
	152	closeDialog() {
	153	this.options.img = store.getters.avatar
	154	this.visible = false;
	155	window.removeEventListener("resize", this.resizeHandler)
	156	}
	157	}
	158	};
	159	</script>
	160	<style scoped lang="scss">
	161	.user-info-head {
	162	position: relative;
	163	display: inline-block;
	164	height: 120px;
	165	}
	166
	167	.user-info-head:hover:after {
	168	content: '+';
	169	position: absolute;
	170	left: 0;
	171	right: 0;
	172	top: 0;
	173	bottom: 0;
	174	color: #eee;
	175	background: rgba(0, 0, 0, 0.5);
	176	font-size: 24px;
	177	font-style: normal;
	178	-webkit-font-smoothing: antialiased;
	179	-moz-osx-font-smoothing: grayscale;
	180	cursor: pointer;
	181	line-height: 110px;
	182	border-radius: 50%;
	183	}
	184	</style>