416 lines
12 KiB
Vue
416 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<div class="user-info-head" :class="video.VideoPath ? 'wihi' : ''" @click="editCropper()">
|
|
<video
|
|
style="width: 208px; height: 208px"
|
|
v-if="video.VideoPath"
|
|
v-bind:src="video.VideoPath"
|
|
class="avatar video-avatar"
|
|
controls="controls"
|
|
>您的浏览器不支持视频播放</video>
|
|
<img
|
|
v-if="options.img"
|
|
v-bind:src="options.img"
|
|
title="点击上传图片"
|
|
style="width: 100px; height: 100px; line-height: 200px"
|
|
/>
|
|
<i
|
|
v-else-if="!options.img && !video.VideoPath"
|
|
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="950px"
|
|
append-to-body
|
|
@opened="modalOpened"
|
|
@close="closeDialog"
|
|
>
|
|
<el-row>
|
|
<el-col :xs="24" :md="0" :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">
|
|
<video
|
|
style="width: 100%; height: 100%"
|
|
v-if="videoForm.showVideoPath"
|
|
v-bind:src="videoForm.showVideoPath"
|
|
class="avatar video-avatar"
|
|
controls="controls"
|
|
>您的浏览器不支持视频播放</video>
|
|
<img style="width: 100%; height: 100%" v-if="previews.url" :src="previews.url" />
|
|
<div v-else></div>
|
|
</div>
|
|
<div
|
|
class="title"
|
|
v-if="
|
|
types != 'posterVideoUrl' &&
|
|
types != 'posterPictureUrl' &&
|
|
types != 'itemDirectoryUrl'
|
|
"
|
|
>请上传图片为800x800px的正方形</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: 19 }" :md="2">
|
|
<el-button v-if="uploadbtn" type="primary" size="small" @click="uploadImg()">提 交</el-button>
|
|
<el-button v-else :loading="!uploadbtn" type="primary" size="small">提 交 中...</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,
|
|
uploadVideoUrl,
|
|
uploadTrainingCategoryPicture,
|
|
updatePoserHeads,
|
|
uploadUrl
|
|
} from "@/api/system/stationAvatar.js";
|
|
|
|
export default {
|
|
components: { VueCropper },
|
|
props: ["img", "type", "item", "tovideo"],
|
|
data() {
|
|
return {
|
|
uploadbtn: true, //上传中不允许点击
|
|
imageUrl: "",
|
|
types: "",
|
|
// 是否显示弹出层
|
|
openimg: false,
|
|
// 是否显示cropper
|
|
visible: false,
|
|
// 弹出层标题
|
|
title: "上传图片/视频",
|
|
options: {
|
|
img: null, //裁剪图片的地址
|
|
autoCrop: true, // 是否默认生成截图框
|
|
autoCropWidth: 300, // 默认生成截图框宽度
|
|
autoCropHeight: 300, // 默认生成截图框高度
|
|
fixedBox: true // 固定截图框大小 不允许改变
|
|
},
|
|
previews: {},
|
|
items: {},
|
|
//显示上传按钮
|
|
videoForm: {
|
|
showVideoPath: null //回显的变量
|
|
},
|
|
video: {
|
|
VideoPath: null //回显的变量
|
|
}
|
|
};
|
|
},
|
|
created() {
|
|
this.types = this.type;
|
|
this.items = this.item;
|
|
if (this.tovideo == null) {
|
|
this.video.VideoPath = null;
|
|
} else if (this.tovideo == "") {
|
|
this.video.VideoPath = null;
|
|
} else {
|
|
this.video.VideoPath = baseurl + this.tovideo;
|
|
}
|
|
if (this.img == null) {
|
|
this.options.img = null;
|
|
} else if (this.img == "") {
|
|
this.options.img = null;
|
|
} else {
|
|
this.options.img = baseurl + this.img;
|
|
}
|
|
if (this.types == "posterVideoUrl" || this.types == "itemDirectoryUrl") {
|
|
this.title = "上传视频";
|
|
} else {
|
|
this.title = "上传图片";
|
|
}
|
|
},
|
|
watch: {
|
|
tovideo: {
|
|
handler(newimg, oldimg) {}
|
|
},
|
|
item: {
|
|
handler(newimg, oldimg) {
|
|
this.items = this.item;
|
|
}
|
|
},
|
|
img: {
|
|
handler(newimg, oldimg) {
|
|
if (this.img == null) {
|
|
this.options.img = null;
|
|
} else if (this.img == "") {
|
|
this.options.img = null;
|
|
} else {
|
|
this.options.img = baseurl + this.img;
|
|
}
|
|
}
|
|
},
|
|
type: {
|
|
handler(newimg, oldimg) {
|
|
this.types = this.type;
|
|
}
|
|
}
|
|
},
|
|
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 (this.types == "posterVideoUrl" || this.types == "itemDirectoryUrl") {
|
|
const reader = new FileReader();
|
|
this.previews.data = file;
|
|
this.previews.url = URL.createObjectURL(file);
|
|
this.videoForm.showVideoPath = URL.createObjectURL(file);
|
|
reader.readAsDataURL(file);
|
|
reader.onload = () => {
|
|
// this.options.img = reader.result;
|
|
};
|
|
} else {
|
|
if (file.type.indexOf("image/") == -1) {
|
|
this.$modal.msgError(
|
|
"文件格式错误，请上传图片类型,如:JPG,PNG后缀的文件。"
|
|
);
|
|
} else {
|
|
const reader = new FileReader();
|
|
this.previews.data = file;
|
|
this.previews.url = URL.createObjectURL(file);
|
|
reader.readAsDataURL(file);
|
|
reader.onload = () => {
|
|
// this.options.img = reader.result;
|
|
};
|
|
}
|
|
}
|
|
},
|
|
// 上传图片
|
|
uploadImg() {
|
|
this.uploadbtn = true;
|
|
let formData = new FormData();
|
|
if (this.previews.data) {
|
|
formData.append("file", this.previews.data);
|
|
formData.append("type", this.types);
|
|
if (this.types == "itemDirectoryUrl") {
|
|
this.$modal.msgSuccess("上传视频中,请耐心等待");
|
|
this.uploadbtn = false;
|
|
uploadVideoUrl(formData).then(response => {
|
|
if (response.code == 200) {
|
|
this.video.VideoPath = baseurl + response.imgUrl;
|
|
this.$emit("imgUrl", response.imgUrl);
|
|
this.items.itemDirectoryUrl = response.imgUrl;
|
|
this.$emit("item", JSON.stringify(this.items));
|
|
this.openimg = false;
|
|
} else {
|
|
this.$emit("item", "false");
|
|
setTimeout(e => {
|
|
this.openimg = false;
|
|
}, 1000);
|
|
}
|
|
this.uploadbtn = true;
|
|
});
|
|
} else if (
|
|
this.types == "trainingItemCoverUrl" ||
|
|
this.types == "trainingItemContentUrl" ||
|
|
this.types == "trainingItemPosterUrl"
|
|
) {
|
|
uploadUrl(formData).then(response => {
|
|
this.options.img = baseurl + response.imgUrl;
|
|
this.$emit("imgUrl", response.imgUrl);
|
|
this.openimg = false;
|
|
});
|
|
} else if (this.types == "trainingCategoryPictureUrl") {
|
|
uploadTrainingCategoryPicture(formData).then(response => {
|
|
this.options.img = baseurl + response.imgUrl;
|
|
this.$emit("imgUrl", response.imgUrl);
|
|
this.openimg = false;
|
|
});
|
|
} else if (this.types == "posterVideoUrl") {
|
|
updatePoserHeads(formData).then(response => {
|
|
this.video.VideoPath = baseurl + response.imgUrl;
|
|
this.$emit("imgUrl", response.imgUrl);
|
|
this.openimg = false;
|
|
});
|
|
} else {
|
|
updateNurseStationHeads(formData).then(response => {
|
|
this.options.img = baseurl + response.imgUrl;
|
|
this.$emit("imgUrl", response.imgUrl);
|
|
if (this.types == "attributePitureUrl") {
|
|
this.items.attributePitureUrl = response.imgUrl;
|
|
this.$emit("item", JSON.stringify(this.items));
|
|
}
|
|
if (this.types == "nurseItemClassifyUrl") {
|
|
this.items.classifyPictureUrl = response.imgUrl;
|
|
this.$emit("item", JSON.stringify(this.items));
|
|
}
|
|
if (this.types == "nurseStationClassifyUrl") {
|
|
this.items.classifyPictureUrl = response.imgUrl;
|
|
this.$emit("item", JSON.stringify(this.items));
|
|
}
|
|
if (this.types == "posterPictureUrl") {
|
|
this.items.posterPictureUrl = response.imgUrl;
|
|
this.$emit("item", JSON.stringify(this.items));
|
|
}
|
|
if (this.types == "certificateUrl") {
|
|
this.items.certificateUrl = response.imgUrl;
|
|
this.$emit("item", JSON.stringify(this.items));
|
|
}
|
|
if (this.types == "personCertificateUrl") {
|
|
this.items.certificateUrl = response.imgUrl;
|
|
this.$emit("item", JSON.stringify(this.items));
|
|
}
|
|
this.openimg = false;
|
|
});
|
|
}
|
|
} else {
|
|
this.openimg = false;
|
|
}
|
|
this.videoForm.showVideoPath = null;
|
|
this.previews.data = null;
|
|
},
|
|
// 实时预览
|
|
realTime(data) {
|
|
this.previews = data;
|
|
},
|
|
// 关闭窗口
|
|
closeDialog() {
|
|
this.imgs = "";
|
|
this.visible = false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.title {
|
|
position: absolute;
|
|
bottom: 5%;
|
|
left: 50%;
|
|
transform: translate(-50%, 0%);
|
|
}
|
|
.avatar-upload-preview {
|
|
position: absolute;
|
|
top: 0%;
|
|
left: 50%;
|
|
transform: translate(-50%, 0%);
|
|
width: 300px;
|
|
height: 300px;
|
|
border-radius: 0%;
|
|
box-shadow: 0 0 4px #ccc;
|
|
overflow: hidden;
|
|
}
|
|
.user-info-head {
|
|
position: relative;
|
|
display: inline-block;
|
|
background: #fafafa;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
.wihi {
|
|
background-color: #fff;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
.wihi:hover:after {
|
|
transform: translate(50%, 50%);
|
|
}
|
|
</style>
|