321 lines
8.8 KiB
Vue
321 lines
8.8 KiB
Vue
<template>
|
|
<div>
|
|
<div class="user-info-head" :class="video.VideoPath ? 'wihi' : ''" @click="editCropper()">
|
|
<video
|
|
style="width: 208px; height: 208px"
|
|
v-bind:src="video.VideoPath"
|
|
v-if="video.VideoPath"
|
|
class="avatar video-avatar"
|
|
controls="controls"
|
|
>您的浏览器不支持视频播放</video>
|
|
<i
|
|
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="24" :style="{ height: '350px' }">
|
|
<div class="avatar-upload-preview">
|
|
<video
|
|
v-if="openimg"
|
|
style="width: 100%; height: 100%"
|
|
v-bind:src="videoForm.showVideoPath"
|
|
class="avatar video-avatar"
|
|
controls="controls"
|
|
>您的浏览器不支持视频播放</video>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<br />
|
|
<el-progress
|
|
v-if="progressFlag"
|
|
:percentage="loadProgress"
|
|
style="height:30px;padding-bottom:20px"
|
|
></el-progress>
|
|
<el-row style="padding-bottom:0px">
|
|
<el-col :lg="3" :md="2">
|
|
<el-upload
|
|
:show-file-list="false"
|
|
class="upload-demo"
|
|
ref="upload"
|
|
:action="uploadurl"
|
|
:on-preview="handlePreview"
|
|
:auto-upload="false"
|
|
:on-change="loadJsonFromFile"
|
|
:data="filedata"
|
|
:headers="headers"
|
|
:on-progress="uploadVideoProcess"
|
|
:on-success="handleAvatarSuccess"
|
|
>
|
|
<el-button slot="trigger" size="small" type="primary" style="float:left">选取文件</el-button>
|
|
</el-upload>
|
|
</el-col>
|
|
<el-col :lg="{ span: 2, offset: 18 }" :md="2">
|
|
<el-button v-if="uploadbtn" type="primary" size="small" @click="submitUpload">提 交</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 { uploadVideoUrl } from "@/api/system/stationAvatar.js";
|
|
import { getToken } from "@/utils/auth";
|
|
export default {
|
|
components: { VueCropper },
|
|
props: ["img", "type", "item", "tovideo"],
|
|
data() {
|
|
return {
|
|
fileList: [],
|
|
loadProgress: 0, // 动态显示进度条
|
|
progressFlag: false, // 关闭进度条
|
|
uploadbtn: true, //上传中不允许点击
|
|
imageUrl: "",
|
|
// 是否显示弹出层
|
|
openimg: false,
|
|
// 是否显示cropper
|
|
visible: false,
|
|
// 弹出层标题
|
|
title: "上传图片/视频",
|
|
filedata: {
|
|
type: ""
|
|
},
|
|
headers: {
|
|
Authorization: "Bearer " + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
|
|
},
|
|
options: {
|
|
img: null, //裁剪图片的地址
|
|
autoCrop: true, // 是否默认生成截图框
|
|
autoCropWidth: 300, // 默认生成截图框宽度
|
|
autoCropHeight: 300, // 默认生成截图框高度
|
|
fixedBox: true // 固定截图框大小 不允许改变
|
|
},
|
|
previews: {},
|
|
items: {},
|
|
//显示上传按钮
|
|
videoForm: {
|
|
showVideoPath: null //回显的变量
|
|
},
|
|
video: {
|
|
VideoPath: null //回显的变量
|
|
},
|
|
uploadurl: undefined
|
|
};
|
|
},
|
|
created() {
|
|
this.uploadurl =
|
|
process.env.VUE_APP_BASE_API + "/system/trainingItem/uploadVideoUrl";
|
|
this.uploadbtn = true;
|
|
this.filedata.type = this.type;
|
|
this.items = this.item;
|
|
if (this.tovideo == null) {
|
|
this.video.VideoPath = null;
|
|
} else if (this.tovideo == "") {
|
|
this.video.VideoPath = null;
|
|
} else {
|
|
this.videoForm.showVideoPath =
|
|
process.env.VUE_APP_BASE_API + this.tovideo;
|
|
this.video.VideoPath = process.env.VUE_APP_BASE_API + this.tovideo;
|
|
}
|
|
this.title = "上传视频";
|
|
},
|
|
watch: {
|
|
tovideo: {
|
|
handler(newimg, oldimg) {
|
|
this.uploadbtn = true;
|
|
if (newimg == null) {
|
|
this.video.VideoPath = null;
|
|
} else if (newimg == "") {
|
|
this.video.VideoPath = null;
|
|
} else {
|
|
this.videoForm.showVideoPath = process.env.VUE_APP_BASE_API + newimg;
|
|
this.video.VideoPath = process.env.VUE_APP_BASE_API + newimg;
|
|
}
|
|
}
|
|
},
|
|
item: {
|
|
handler(newimg, oldimg) {
|
|
this.uploadbtn = true;
|
|
this.items = this.item;
|
|
}
|
|
},
|
|
type: {
|
|
handler(newimg, oldimg) {
|
|
this.filedata.type = this.type;
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
uploadVideoProcess(event, file, fileList) {
|
|
this.progressFlag = true; // 显示进度条
|
|
this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
|
|
if (this.loadProgress >= 100) {
|
|
this.loadProgress = 100;
|
|
setTimeout(() => {
|
|
this.progressFlag = false;
|
|
}, 1000); // 一秒后关闭进度条
|
|
}
|
|
},
|
|
loadJsonFromFile(file, fileList) {
|
|
const reader = new FileReader();
|
|
this.previews.data = file.raw;
|
|
this.videoForm.showVideoPath = URL.createObjectURL(file.raw);
|
|
reader.readAsDataURL(file.raw);
|
|
reader.onload = () => {
|
|
// this.options.img = reader.result;
|
|
};
|
|
},
|
|
submitUpload() {
|
|
this.uploadbtn = false;
|
|
this.$refs.upload.submit();
|
|
},
|
|
handlePreview(file) {},
|
|
// 编辑头像
|
|
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) {
|
|
const reader = new FileReader();
|
|
this.previews.data = file;
|
|
this.videoForm.showVideoPath = URL.createObjectURL(file);
|
|
reader.readAsDataURL(file);
|
|
reader.onload = () => {
|
|
// this.options.img = reader.result;
|
|
};
|
|
},
|
|
handleAvatarSuccess(res, file) {
|
|
this.video.VideoPath = process.env.VUE_APP_BASE_API + res.imgUrl;
|
|
this.items.itemDirectoryUrl = res.imgUrl;
|
|
this.$emit("item", JSON.stringify(this.items));
|
|
this.$modal.msgSuccess("上传视频成功");
|
|
this.openimg = false;
|
|
this.uploadbtn = true;
|
|
},
|
|
// 上传图片
|
|
uploadImg() {
|
|
this.uploadbtn = true;
|
|
let formData = new FormData();
|
|
if (this.previews.data) {
|
|
formData.append("file", this.previews.data);
|
|
formData.append("type", this.filedata.type);
|
|
this.$modal.msgSuccess("上传视频中,请耐心等待");
|
|
this.uploadbtn = false;
|
|
uploadVideoUrl(formData).then(response => {
|
|
if (response.code == 200) {
|
|
this.video.VideoPath =
|
|
process.env.VUE_APP_BASE_API + response.imgUrl;
|
|
this.items.itemDirectoryUrl = response.imgUrl;
|
|
this.$emit("item", JSON.stringify(this.items));
|
|
this.openimg = false;
|
|
} else {
|
|
setTimeout(e => {
|
|
this.openimg = false;
|
|
}, 1000);
|
|
}
|
|
this.uploadbtn = true;
|
|
});
|
|
} else {
|
|
this.openimg = false;
|
|
}
|
|
// this.videoForm.showVideoPath = null;
|
|
this.previews.data = null;
|
|
},
|
|
// 实时预览
|
|
realTime(data) {
|
|
this.previews = data;
|
|
},
|
|
// 关闭窗口
|
|
closeDialog() {
|
|
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>
|