274 lines
6.7 KiB
Vue
274 lines
6.7 KiB
Vue
<template>
|
||
<div>
|
||
<div
|
||
class="user-info-head"
|
||
@click="editCropper()"
|
||
style="width: 208px; height: 200px"
|
||
>
|
||
<img
|
||
v-if="options.img"
|
||
v-bind:src="options.img"
|
||
title="点击上传头像"
|
||
style="width: 208px; height: 200px; line-height: 200px"
|
||
/>
|
||
<i
|
||
v-else
|
||
class="el-icon-plus avatar-uploader-icon"
|
||
style="
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
"
|
||
></i>
|
||
</div>
|
||
|
||
<el-dialog
|
||
:title="title"
|
||
:visible.sync="openimg"
|
||
width="800px"
|
||
append-to-body
|
||
@opened="modalOpened"
|
||
@close="closeDialog"
|
||
>
|
||
<el-row>
|
||
<el-col :xs="24" :md="12" :style="{ height: '350px' }">
|
||
<vue-cropper
|
||
ref="cropper"
|
||
:img="options.img"
|
||
:info="true"
|
||
:autoCrop="options.autoCrop"
|
||
:autoCropWidth="options.autoCropWidth"
|
||
:autoCropHeight="options.autoCropHeight"
|
||
:fixedBox="options.fixedBox"
|
||
@realTime="realTime"
|
||
v-if="visible"
|
||
/>
|
||
</el-col>
|
||
<el-col :xs="24" :md="12" :style="{ height: '350px' }">
|
||
<div class="avatar-upload-preview">
|
||
<img :src="previews.url" :style="previews.img" />
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<br />
|
||
<el-row>
|
||
<el-col :lg="2" :md="2">
|
||
<el-upload
|
||
action="#"
|
||
:http-request="requestUpload"
|
||
:show-file-list="false"
|
||
:before-upload="beforeUpload"
|
||
>
|
||
<el-button size="small">
|
||
选择
|
||
<i class="el-icon-upload el-icon--right"></i>
|
||
</el-button>
|
||
</el-upload>
|
||
</el-col>
|
||
<el-col :lg="{ span: 1, offset: 2 }" :md="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-button
|
||
icon="el-icon-minus"
|
||
size="small"
|
||
@click="changeScale(-1)"
|
||
></el-button>
|
||
</el-col>
|
||
<el-col :lg="{ span: 1, offset: 1 }" :md="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-button
|
||
icon="el-icon-refresh-right"
|
||
size="small"
|
||
@click="rotateRight()"
|
||
></el-button>
|
||
</el-col>
|
||
<el-col :lg="{ span: 2, offset: 6 }" :md="2">
|
||
<el-button type="primary" size="small" @click="uploadImg()"
|
||
>提 交</el-button
|
||
>
|
||
</el-col>
|
||
</el-row>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { VueCropper } from "vue-cropper";
|
||
import baseurl from "@/api/baseurl.js";
|
||
import { updateNurseStationHeads, posts } from "@/api/system/stationAvatar.js";
|
||
|
||
export default {
|
||
components: { VueCropper },
|
||
|
||
props: {
|
||
img: {
|
||
inputName: String,
|
||
required: true,
|
||
},
|
||
type: {
|
||
inputName: String,
|
||
required: true,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
imageUrl: "",
|
||
types: "",
|
||
// 是否显示弹出层
|
||
openimg: false,
|
||
// 是否显示cropper
|
||
visible: false,
|
||
// 弹出层标题
|
||
title: "上传头像",
|
||
options: {
|
||
img: null, //裁剪图片的地址
|
||
autoCrop: true, // 是否默认生成截图框
|
||
autoCropWidth: 200, // 默认生成截图框宽度
|
||
autoCropHeight: 200, // 默认生成截图框高度
|
||
fixedBox: true, // 固定截图框大小 不允许改变
|
||
},
|
||
previews: {},
|
||
};
|
||
},
|
||
created() {
|
||
console.log(this.img);
|
||
console.log(this.type);
|
||
this.types = this.type;
|
||
if (this.img == null) {
|
||
console.log(1);
|
||
this.options.img = null;
|
||
} else if (this.img == "") {
|
||
console.log(2);
|
||
this.options.img = null;
|
||
} else {
|
||
console.log(3);
|
||
this.options.img = baseurl + this.img;
|
||
}
|
||
},
|
||
watch: {
|
||
img: {
|
||
handler(newimg, oldimg) {
|
||
console.log(this.img);
|
||
if (this.img == null) {
|
||
console.log(1);
|
||
this.options.img = null;
|
||
} else if (this.img == "") {
|
||
console.log(2);
|
||
this.options.img = null;
|
||
} else {
|
||
console.log(3);
|
||
this.options.img = baseurl + this.img;
|
||
}
|
||
},
|
||
},
|
||
type: {
|
||
handler(newimg, oldimg) {
|
||
this.types = this.type;
|
||
console.log(this.types);
|
||
},
|
||
},
|
||
},
|
||
methods: {
|
||
// 编辑头像
|
||
editCropper() {
|
||
this.openimg = true;
|
||
},
|
||
// 打开弹出层结束时的回调
|
||
modalOpened() {
|
||
this.visible = true;
|
||
},
|
||
// 覆盖默认的上传行为
|
||
requestUpload() {},
|
||
// 向左旋转
|
||
rotateLeft() {
|
||
this.$refs.cropper.rotateLeft();
|
||
},
|
||
// 向右旋转
|
||
rotateRight() {
|
||
this.$refs.cropper.rotateRight();
|
||
},
|
||
// 图片缩放
|
||
changeScale(num) {
|
||
num = num || 1;
|
||
this.$refs.cropper.changeScale(num);
|
||
},
|
||
// 上传预处理
|
||
beforeUpload(file) {
|
||
if (file.type.indexOf("image/") == -1) {
|
||
this.$modal.msgError(
|
||
"文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。"
|
||
);
|
||
} else {
|
||
const reader = new FileReader();
|
||
reader.readAsDataURL(file);
|
||
reader.onload = () => {
|
||
this.options.img = reader.result;
|
||
};
|
||
}
|
||
},
|
||
// 上传图片
|
||
uploadImg() {
|
||
// console.log(this.types);
|
||
this.$refs.cropper.getCropBlob((data) => {
|
||
console.log(data);
|
||
let formData = new FormData();
|
||
console.log(formData);
|
||
formData.append("file", data);
|
||
formData.append("type", this.types);
|
||
console.log(formData);
|
||
updateNurseStationHeads(formData).then((response) => {
|
||
console.log(response);
|
||
this.options.img = baseurl + response.imgUrl;
|
||
this.openimg = false;
|
||
});
|
||
});
|
||
},
|
||
// 实时预览
|
||
realTime(data) {
|
||
this.previews = data;
|
||
},
|
||
// 关闭窗口
|
||
closeDialog() {
|
||
this.imgs = "";
|
||
this.visible = false;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.user-info-head {
|
||
position: relative;
|
||
display: inline-block;
|
||
height: 120px;
|
||
}
|
||
|
||
.user-info-head:hover:after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
color: #eee;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
font-size: 24px;
|
||
font-style: normal;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
cursor: pointer;
|
||
line-height: 110px;
|
||
border-radius: 50%;
|
||
}
|
||
</style> |